@cloud-ru/ds-block 1.0.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 (32) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/LICENSE +201 -0
  3. package/README.md +128 -0
  4. package/dist/cjs/Block.d.ts +62 -0
  5. package/dist/cjs/Block.js +50 -0
  6. package/dist/cjs/constants.d.ts +10 -0
  7. package/dist/cjs/constants.js +13 -0
  8. package/dist/cjs/index.d.ts +3 -0
  9. package/dist/cjs/index.js +19 -0
  10. package/dist/cjs/package.json +3 -0
  11. package/dist/cjs/style.css +258 -0
  12. package/dist/cjs/styles.module.css +258 -0
  13. package/dist/cjs/types.d.ts +4 -0
  14. package/dist/cjs/types.js +2 -0
  15. package/dist/esm/Block.d.ts +62 -0
  16. package/dist/esm/Block.js +44 -0
  17. package/dist/esm/constants.d.ts +10 -0
  18. package/dist/esm/constants.js +10 -0
  19. package/dist/esm/index.d.ts +3 -0
  20. package/dist/esm/index.js +3 -0
  21. package/dist/esm/style.css +258 -0
  22. package/dist/esm/styles.module.css +258 -0
  23. package/dist/esm/types.d.ts +4 -0
  24. package/dist/esm/types.js +1 -0
  25. package/dist/tsconfig.cjs.tsbuildinfo +1 -0
  26. package/dist/tsconfig.esm.tsbuildinfo +1 -0
  27. package/package.json +43 -0
  28. package/src/Block.tsx +97 -0
  29. package/src/constants.ts +11 -0
  30. package/src/index.ts +3 -0
  31. package/src/styles.module.scss +59 -0
  32. package/src/types.ts +6 -0
package/dist/esm/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export * from './Block.js';
2
+ export * from './constants.js';
3
+ export * from './types.js';
package/dist/esm/style.css ADDED
@@ -0,0 +1,258 @@
1
+ @charset "UTF-8";
2
+ .acrylic{
3
+ pointer-events:none;
4
+ position:absolute;
5
+ inset:0;
6
+ border-radius:inherit;
7
+ }
8
+
9
+ .block{
10
+ position:relative;
11
+ display:block;
12
+ box-sizing:border-box;
13
+ }
14
+ .block[data-view=outline] .borderLayer{
15
+ position:absolute;
16
+ inset:0;
17
+ border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
18
+ border-style:solid;
19
+ border-radius:inherit;
20
+ }
21
+ .block[data-view=elevated][data-size=l]{
22
+ box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
23
+ }
24
+ .block[data-view=elevated][data-size=m], .block[data-view=elevated][data-size=s]{
25
+ box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
26
+ }
27
+ .block[data-acrylic-appearance=primary][data-acrylic-level=default]{
28
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
29
+ }
30
+ .block[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
31
+ opacity:var(--sn-acrylic-opacityBackground, 1);
32
+ 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))));
33
+ }
34
+ .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
35
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
36
+ }
37
+ .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
38
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
39
+ 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))));
40
+ }
41
+ .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
42
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
43
+ }
44
+ .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
45
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
46
+ 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))));
47
+ }
48
+ .block[data-acrylic-appearance=neutral][data-acrylic-level=default]{
49
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
50
+ }
51
+ .block[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
52
+ opacity:var(--sn-acrylic-opacityBackground, 1);
53
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
54
+ }
55
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
56
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
57
+ }
58
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
59
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
60
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
61
+ }
62
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
63
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
64
+ }
65
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
66
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
67
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
68
+ }
69
+ .block[data-acrylic-appearance=red][data-acrylic-level=default]{
70
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
71
+ }
72
+ .block[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
73
+ opacity:var(--sn-acrylic-opacityBackground, 1);
74
+ background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
75
+ }
76
+ .block[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
77
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
78
+ }
79
+ .block[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
80
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
81
+ background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
82
+ }
83
+ .block[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
84
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
85
+ }
86
+ .block[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
87
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
88
+ background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
89
+ }
90
+ .block[data-acrylic-appearance=orange][data-acrylic-level=default]{
91
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
92
+ }
93
+ .block[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
94
+ opacity:var(--sn-acrylic-opacityBackground, 1);
95
+ background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
96
+ }
97
+ .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
98
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
99
+ }
100
+ .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
101
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
102
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
103
+ }
104
+ .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
105
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
106
+ }
107
+ .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
108
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
109
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
110
+ }
111
+ .block[data-acrylic-appearance=yellow][data-acrylic-level=default]{
112
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
113
+ }
114
+ .block[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
115
+ opacity:var(--sn-acrylic-opacityBackground, 1);
116
+ background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
117
+ }
118
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
119
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
120
+ }
121
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
122
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
123
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
124
+ }
125
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
126
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
127
+ }
128
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
129
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
130
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
131
+ }
132
+ .block[data-acrylic-appearance=green][data-acrylic-level=default]{
133
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
134
+ }
135
+ .block[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
136
+ opacity:var(--sn-acrylic-opacityBackground, 1);
137
+ background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
138
+ }
139
+ .block[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
140
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
141
+ }
142
+ .block[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
143
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
144
+ background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
145
+ }
146
+ .block[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
147
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
148
+ }
149
+ .block[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
150
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
151
+ background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
152
+ }
153
+ .block[data-acrylic-appearance=blue][data-acrylic-level=default]{
154
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
155
+ }
156
+ .block[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
157
+ opacity:var(--sn-acrylic-opacityBackground, 1);
158
+ background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
159
+ }
160
+ .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
161
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
162
+ }
163
+ .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
164
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
165
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
166
+ }
167
+ .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
168
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
169
+ }
170
+ .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
171
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
172
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
173
+ }
174
+ .block[data-acrylic-appearance=violet][data-acrylic-level=default]{
175
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
176
+ }
177
+ .block[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
178
+ opacity:var(--sn-acrylic-opacityBackground, 1);
179
+ background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
180
+ }
181
+ .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
182
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
183
+ }
184
+ .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
185
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
186
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
187
+ }
188
+ .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
189
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
190
+ }
191
+ .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
192
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
193
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
194
+ }
195
+ .block[data-acrylic-appearance=pink][data-acrylic-level=default]{
196
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
197
+ }
198
+ .block[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
199
+ opacity:var(--sn-acrylic-opacityBackground, 1);
200
+ background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
201
+ }
202
+ .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
203
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
204
+ }
205
+ .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
206
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
207
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
208
+ }
209
+ .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
210
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
211
+ }
212
+ .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
213
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
214
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
215
+ }
216
+ .block[data-acrylic-appearance=transparent]{
217
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
218
+ }
219
+ .block[data-acrylic-appearance=transparent] .acrylic{
220
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
221
+ background:transparent;
222
+ }
223
+ .block[data-acrylic-appearance=decorTransparent]{
224
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
225
+ }
226
+ .block[data-acrylic-appearance=decorTransparent] .acrylic{
227
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
228
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
229
+ }
230
+ .block[data-size=s]{
231
+ border-radius:var(--sn-block-anatomy-s-borderRadius, var(--sn-brand-anatomy-radius-block-s, var(--sn-primitive-dimension-4, 4px)));
232
+ padding:var(--sn-block-anatomy-s-padding, var(--sn-density-spacing-block-s-padding, var(--sn-primitive-dimension-16, 16px)));
233
+ border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
234
+ }
235
+ .block[data-size=s][data-view=outline] .borderLayer{
236
+ border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
237
+ }
238
+ .block[data-size=m]{
239
+ border-radius:var(--sn-block-anatomy-m-borderRadius, var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px)));
240
+ padding:var(--sn-block-anatomy-m-padding, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
241
+ border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
242
+ }
243
+ .block[data-size=m][data-view=outline] .borderLayer{
244
+ border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
245
+ }
246
+ .block[data-size=l]{
247
+ border-radius:var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px)));
248
+ padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
249
+ border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
250
+ }
251
+ .block[data-size=l][data-view=outline] .borderLayer{
252
+ border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
253
+ }
254
+
255
+ .content{
256
+ position:relative;
257
+ min-width:0;
258
+ }
package/dist/esm/styles.module.css ADDED
@@ -0,0 +1,258 @@
1
+ @charset "UTF-8";
2
+ .acrylic{
3
+ pointer-events:none;
4
+ position:absolute;
5
+ inset:0;
6
+ border-radius:inherit;
7
+ }
8
+
9
+ .block{
10
+ position:relative;
11
+ display:block;
12
+ box-sizing:border-box;
13
+ }
14
+ .block[data-view=outline] .borderLayer{
15
+ position:absolute;
16
+ inset:0;
17
+ border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
18
+ border-style:solid;
19
+ border-radius:inherit;
20
+ }
21
+ .block[data-view=elevated][data-size=l]{
22
+ box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
23
+ }
24
+ .block[data-view=elevated][data-size=m], .block[data-view=elevated][data-size=s]{
25
+ box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
26
+ }
27
+ .block[data-acrylic-appearance=primary][data-acrylic-level=default]{
28
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
29
+ }
30
+ .block[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
31
+ opacity:var(--sn-acrylic-opacityBackground, 1);
32
+ 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))));
33
+ }
34
+ .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
35
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
36
+ }
37
+ .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
38
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
39
+ 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))));
40
+ }
41
+ .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
42
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
43
+ }
44
+ .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
45
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
46
+ 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))));
47
+ }
48
+ .block[data-acrylic-appearance=neutral][data-acrylic-level=default]{
49
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
50
+ }
51
+ .block[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
52
+ opacity:var(--sn-acrylic-opacityBackground, 1);
53
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
54
+ }
55
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
56
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
57
+ }
58
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
59
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
60
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
61
+ }
62
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
63
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
64
+ }
65
+ .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
66
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
67
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
68
+ }
69
+ .block[data-acrylic-appearance=red][data-acrylic-level=default]{
70
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
71
+ }
72
+ .block[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
73
+ opacity:var(--sn-acrylic-opacityBackground, 1);
74
+ background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
75
+ }
76
+ .block[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
77
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
78
+ }
79
+ .block[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
80
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
81
+ background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
82
+ }
83
+ .block[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
84
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
85
+ }
86
+ .block[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
87
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
88
+ background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
89
+ }
90
+ .block[data-acrylic-appearance=orange][data-acrylic-level=default]{
91
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
92
+ }
93
+ .block[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
94
+ opacity:var(--sn-acrylic-opacityBackground, 1);
95
+ background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
96
+ }
97
+ .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
98
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
99
+ }
100
+ .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
101
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
102
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
103
+ }
104
+ .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
105
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
106
+ }
107
+ .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
108
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
109
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
110
+ }
111
+ .block[data-acrylic-appearance=yellow][data-acrylic-level=default]{
112
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
113
+ }
114
+ .block[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
115
+ opacity:var(--sn-acrylic-opacityBackground, 1);
116
+ background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
117
+ }
118
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
119
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
120
+ }
121
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
122
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
123
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
124
+ }
125
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
126
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
127
+ }
128
+ .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
129
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
130
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
131
+ }
132
+ .block[data-acrylic-appearance=green][data-acrylic-level=default]{
133
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
134
+ }
135
+ .block[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
136
+ opacity:var(--sn-acrylic-opacityBackground, 1);
137
+ background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
138
+ }
139
+ .block[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
140
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
141
+ }
142
+ .block[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
143
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
144
+ background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
145
+ }
146
+ .block[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
147
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
148
+ }
149
+ .block[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
150
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
151
+ background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
152
+ }
153
+ .block[data-acrylic-appearance=blue][data-acrylic-level=default]{
154
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
155
+ }
156
+ .block[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
157
+ opacity:var(--sn-acrylic-opacityBackground, 1);
158
+ background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
159
+ }
160
+ .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
161
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
162
+ }
163
+ .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
164
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
165
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
166
+ }
167
+ .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
168
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
169
+ }
170
+ .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
171
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
172
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
173
+ }
174
+ .block[data-acrylic-appearance=violet][data-acrylic-level=default]{
175
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
176
+ }
177
+ .block[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
178
+ opacity:var(--sn-acrylic-opacityBackground, 1);
179
+ background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
180
+ }
181
+ .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
182
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
183
+ }
184
+ .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
185
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
186
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
187
+ }
188
+ .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
189
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
190
+ }
191
+ .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
192
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
193
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
194
+ }
195
+ .block[data-acrylic-appearance=pink][data-acrylic-level=default]{
196
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
197
+ }
198
+ .block[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
199
+ opacity:var(--sn-acrylic-opacityBackground, 1);
200
+ background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
201
+ }
202
+ .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
203
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
204
+ }
205
+ .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
206
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
207
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
208
+ }
209
+ .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
210
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
211
+ }
212
+ .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
213
+ opacity:var(--sn-acrylic-opacityBackground2Level, 1);
214
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
215
+ }
216
+ .block[data-acrylic-appearance=transparent]{
217
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
218
+ }
219
+ .block[data-acrylic-appearance=transparent] .acrylic{
220
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
221
+ background:transparent;
222
+ }
223
+ .block[data-acrylic-appearance=decorTransparent]{
224
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
225
+ }
226
+ .block[data-acrylic-appearance=decorTransparent] .acrylic{
227
+ opacity:var(--sn-acrylic-opacityBackground1Level, 1);
228
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
229
+ }
230
+ .block[data-size=s]{
231
+ border-radius:var(--sn-block-anatomy-s-borderRadius, var(--sn-brand-anatomy-radius-block-s, var(--sn-primitive-dimension-4, 4px)));
232
+ padding:var(--sn-block-anatomy-s-padding, var(--sn-density-spacing-block-s-padding, var(--sn-primitive-dimension-16, 16px)));
233
+ border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
234
+ }
235
+ .block[data-size=s][data-view=outline] .borderLayer{
236
+ border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
237
+ }
238
+ .block[data-size=m]{
239
+ border-radius:var(--sn-block-anatomy-m-borderRadius, var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px)));
240
+ padding:var(--sn-block-anatomy-m-padding, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
241
+ border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
242
+ }
243
+ .block[data-size=m][data-view=outline] .borderLayer{
244
+ border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
245
+ }
246
+ .block[data-size=l]{
247
+ border-radius:var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px)));
248
+ padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
249
+ border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
250
+ }
251
+ .block[data-size=l][data-view=outline] .borderLayer{
252
+ border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
253
+ }
254
+
255
+ .content{
256
+ position:relative;
257
+ min-width:0;
258
+ }
package/dist/esm/types.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ValueOf } from '@cloud-ru/ds-utils';
2
+ import { SIZE, VIEW } from './constants.js';
3
+ export type Size = ValueOf<typeof SIZE>;
4
+ export type View = ValueOf<typeof VIEW>;
package/dist/esm/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};