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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +6 -1
  2. package/dist/cjs/style.css +61 -61
  3. package/dist/cjs/styles.module.css +61 -61
  4. package/dist/esm/style.css +61 -61
  5. package/dist/esm/styles.module.css +61 -61
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -121,8 +121,13 @@ export function BackgroundPalette() {
121
121
  |------|------|---------|-------------|
122
122
  | `backgroundPredefined` | `"blueBackground"` \| `"decorTransparent"` \| `"greenBackground"` \| `"neutralBackground1Level"` \| `"orangeBackground"` \| `"pinkBackground"` \| `"primaryBackground"` \| `"redBackground"` \| `"transparent"` \| `"violetBackground"` \| `"yellowBackground"` | `neutralBackground1Level` | Слой backgroundPredefined + acrylic (см. `BACKGROUND_PREDEFINED_FILL` в `@cloud-ru/ds-materials`). <br/> Задаёт палитру подложки: цвета, `transparent` и `decorTransparent`. <br/> По умолчанию `material/neutralBackground1Level`. |
123
123
  | `children` | `ReactNode` | — | Содержимое |
124
- | `content` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Подзаголовок |
125
124
  | `contentClassName` | `string` | — | Класс на внутренний слот содержимого (`.content`). Block — подложка, а не layout-контейнер <br/> (`display: block`); раскладку контента задаёт потребитель. Этот проп даёт управлять слотом <br/> содержимого напрямую — напр. растянуть его по высоте блока (`flex`/`height`), когда корень <br/> блока сделан flex-контейнером через `className`. |
126
125
  | `data-test-id` | `string` | — | Стабильный идентификатор для e2e/tests |
127
126
  | `size` | `"l"` \| `"m"` \| `"s"` | `m` | Размер |
128
127
  | `view` | `"elevated"` \| `"outline"` \| `"simple"` | `simple` | Визуальный режим поверхности |
128
+
129
+ #### Related types
130
+
131
+ - `Size` = `"l"` \| `"m"` \| `"s"`
132
+
133
+ - `View` = `"elevated"` \| `"outline"` \| `"simple"`
package/dist/cjs/style.css CHANGED
@@ -19,209 +19,209 @@
19
19
  border-radius:inherit;
20
20
  }
21
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)));
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-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)));
23
23
  }
24
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)));
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-spread, 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-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
26
26
  }
27
27
  .block[data-acrylic-appearance=primary][data-acrylic-level=default]{
28
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
28
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
29
29
  }
30
30
  .block[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
31
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))));
32
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
33
33
  }
34
34
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
35
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
35
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
36
36
  }
37
37
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
38
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))));
39
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
40
40
  }
41
41
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
42
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
42
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
43
43
  }
44
44
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
45
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))));
46
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
47
47
  }
48
48
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default]{
49
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
49
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
50
50
  }
51
51
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
52
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)));
53
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
54
54
  }
55
55
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
56
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
56
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
57
57
  }
58
58
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
59
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)));
60
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
61
61
  }
62
62
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
63
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
63
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
64
64
  }
65
65
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
66
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)));
67
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
68
  }
69
69
  .block[data-acrylic-appearance=red][data-acrylic-level=default]{
70
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
70
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
71
71
  }
72
72
  .block[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
73
73
  opacity:var(--sn-acrylic-opacityBackground, 1);
74
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
74
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
75
75
  }
76
76
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
77
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
77
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
78
78
  }
79
79
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
80
80
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
81
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
81
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
82
82
  }
83
83
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
84
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
84
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
85
85
  }
86
86
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
87
87
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
88
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
88
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
89
89
  }
90
90
  .block[data-acrylic-appearance=orange][data-acrylic-level=default]{
91
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
91
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
92
92
  }
93
93
  .block[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
94
94
  opacity:var(--sn-acrylic-opacityBackground, 1);
95
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
95
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
96
96
  }
97
97
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
98
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
98
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
99
99
  }
100
100
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
101
101
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
102
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
102
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
103
103
  }
104
104
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
105
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
105
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
106
106
  }
107
107
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
108
108
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
109
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
109
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
110
110
  }
111
111
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default]{
112
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
112
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
113
113
  }
114
114
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
115
115
  opacity:var(--sn-acrylic-opacityBackground, 1);
116
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
116
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
117
117
  }
118
118
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
119
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
119
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
120
120
  }
121
121
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
122
122
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
123
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
123
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
124
124
  }
125
125
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
126
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
126
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
127
127
  }
128
128
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
129
129
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
130
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
130
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
131
131
  }
132
132
  .block[data-acrylic-appearance=green][data-acrylic-level=default]{
133
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
133
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
134
134
  }
135
135
  .block[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
136
136
  opacity:var(--sn-acrylic-opacityBackground, 1);
137
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
137
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
138
138
  }
139
139
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
140
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
140
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
141
141
  }
142
142
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
143
143
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
144
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
144
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
145
145
  }
146
146
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
147
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
147
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
148
148
  }
149
149
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
150
150
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
151
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
151
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
152
152
  }
153
153
  .block[data-acrylic-appearance=blue][data-acrylic-level=default]{
154
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
154
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
155
155
  }
156
156
  .block[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
157
157
  opacity:var(--sn-acrylic-opacityBackground, 1);
158
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
158
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
159
159
  }
160
160
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
161
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
161
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
162
162
  }
163
163
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
164
164
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
165
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
165
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
166
166
  }
167
167
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
168
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
168
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
169
169
  }
170
170
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
171
171
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
172
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
172
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
173
173
  }
174
174
  .block[data-acrylic-appearance=violet][data-acrylic-level=default]{
175
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
175
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
176
176
  }
177
177
  .block[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
178
178
  opacity:var(--sn-acrylic-opacityBackground, 1);
179
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
179
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
180
180
  }
181
181
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
182
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
182
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
183
183
  }
184
184
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
185
185
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
186
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
186
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
187
187
  }
188
188
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
189
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
189
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
190
190
  }
191
191
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
192
192
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
193
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
193
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
194
194
  }
195
195
  .block[data-acrylic-appearance=pink][data-acrylic-level=default]{
196
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
196
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
197
197
  }
198
198
  .block[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
199
199
  opacity:var(--sn-acrylic-opacityBackground, 1);
200
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
200
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
201
201
  }
202
202
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
203
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
203
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
204
204
  }
205
205
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
206
206
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
207
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
207
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
208
208
  }
209
209
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
210
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
210
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
211
211
  }
212
212
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
213
213
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
214
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
214
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
215
215
  }
216
216
  .block[data-acrylic-appearance=transparent]{
217
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
217
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
218
218
  }
219
219
  .block[data-acrylic-appearance=transparent] .acrylic{
220
220
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
221
221
  background:transparent;
222
222
  }
223
223
  .block[data-acrylic-appearance=decorTransparent]{
224
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
224
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
225
225
  }
226
226
  .block[data-acrylic-appearance=decorTransparent] .acrylic{
227
227
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -229,7 +229,7 @@
229
229
  }
230
230
  .block[data-size=s]{
231
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)));
232
+ padding:var(--sn-block-anatomy-s-padding, var(--sn-density-spacing-block-s-padding, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
233
233
  border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
234
234
  }
235
235
  .block[data-size=s][data-view=outline] .borderLayer{
@@ -237,7 +237,7 @@
237
237
  }
238
238
  .block[data-size=m]{
239
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)));
240
+ padding:var(--sn-block-anatomy-m-padding, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
241
241
  border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
242
242
  }
243
243
  .block[data-size=m][data-view=outline] .borderLayer{
@@ -245,7 +245,7 @@
245
245
  }
246
246
  .block[data-size=l]{
247
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)));
248
+ padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
249
249
  border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
250
250
  }
251
251
  .block[data-size=l][data-view=outline] .borderLayer{
package/dist/cjs/styles.module.css CHANGED
@@ -19,209 +19,209 @@
19
19
  border-radius:inherit;
20
20
  }
21
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)));
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-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)));
23
23
  }
24
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)));
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-spread, 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-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
26
26
  }
27
27
  .block[data-acrylic-appearance=primary][data-acrylic-level=default]{
28
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
28
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
29
29
  }
30
30
  .block[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
31
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))));
32
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
33
33
  }
34
34
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
35
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
35
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
36
36
  }
37
37
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
38
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))));
39
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
40
40
  }
41
41
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
42
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
42
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
43
43
  }
44
44
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
45
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))));
46
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
47
47
  }
48
48
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default]{
49
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
49
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
50
50
  }
51
51
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
52
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)));
53
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
54
54
  }
55
55
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
56
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
56
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
57
57
  }
58
58
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
59
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)));
60
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
61
61
  }
62
62
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
63
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
63
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
64
64
  }
65
65
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
66
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)));
67
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
68
  }
69
69
  .block[data-acrylic-appearance=red][data-acrylic-level=default]{
70
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
70
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
71
71
  }
72
72
  .block[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
73
73
  opacity:var(--sn-acrylic-opacityBackground, 1);
74
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
74
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
75
75
  }
76
76
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
77
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
77
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
78
78
  }
79
79
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
80
80
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
81
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
81
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
82
82
  }
83
83
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
84
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
84
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
85
85
  }
86
86
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
87
87
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
88
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
88
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
89
89
  }
90
90
  .block[data-acrylic-appearance=orange][data-acrylic-level=default]{
91
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
91
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
92
92
  }
93
93
  .block[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
94
94
  opacity:var(--sn-acrylic-opacityBackground, 1);
95
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
95
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
96
96
  }
97
97
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
98
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
98
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
99
99
  }
100
100
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
101
101
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
102
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
102
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
103
103
  }
104
104
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
105
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
105
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
106
106
  }
107
107
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
108
108
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
109
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
109
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
110
110
  }
111
111
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default]{
112
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
112
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
113
113
  }
114
114
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
115
115
  opacity:var(--sn-acrylic-opacityBackground, 1);
116
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
116
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
117
117
  }
118
118
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
119
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
119
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
120
120
  }
121
121
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
122
122
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
123
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
123
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
124
124
  }
125
125
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
126
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
126
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
127
127
  }
128
128
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
129
129
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
130
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
130
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
131
131
  }
132
132
  .block[data-acrylic-appearance=green][data-acrylic-level=default]{
133
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
133
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
134
134
  }
135
135
  .block[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
136
136
  opacity:var(--sn-acrylic-opacityBackground, 1);
137
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
137
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
138
138
  }
139
139
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
140
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
140
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
141
141
  }
142
142
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
143
143
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
144
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
144
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
145
145
  }
146
146
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
147
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
147
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
148
148
  }
149
149
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
150
150
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
151
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
151
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
152
152
  }
153
153
  .block[data-acrylic-appearance=blue][data-acrylic-level=default]{
154
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
154
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
155
155
  }
156
156
  .block[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
157
157
  opacity:var(--sn-acrylic-opacityBackground, 1);
158
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
158
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
159
159
  }
160
160
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
161
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
161
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
162
162
  }
163
163
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
164
164
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
165
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
165
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
166
166
  }
167
167
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
168
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
168
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
169
169
  }
170
170
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
171
171
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
172
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
172
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
173
173
  }
174
174
  .block[data-acrylic-appearance=violet][data-acrylic-level=default]{
175
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
175
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
176
176
  }
177
177
  .block[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
178
178
  opacity:var(--sn-acrylic-opacityBackground, 1);
179
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
179
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
180
180
  }
181
181
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
182
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
182
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
183
183
  }
184
184
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
185
185
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
186
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
186
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
187
187
  }
188
188
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
189
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
189
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
190
190
  }
191
191
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
192
192
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
193
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
193
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
194
194
  }
195
195
  .block[data-acrylic-appearance=pink][data-acrylic-level=default]{
196
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
196
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
197
197
  }
198
198
  .block[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
199
199
  opacity:var(--sn-acrylic-opacityBackground, 1);
200
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
200
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
201
201
  }
202
202
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
203
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
203
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
204
204
  }
205
205
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
206
206
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
207
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
207
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
208
208
  }
209
209
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
210
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
210
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
211
211
  }
212
212
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
213
213
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
214
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
214
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
215
215
  }
216
216
  .block[data-acrylic-appearance=transparent]{
217
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
217
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
218
218
  }
219
219
  .block[data-acrylic-appearance=transparent] .acrylic{
220
220
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
221
221
  background:transparent;
222
222
  }
223
223
  .block[data-acrylic-appearance=decorTransparent]{
224
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
224
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
225
225
  }
226
226
  .block[data-acrylic-appearance=decorTransparent] .acrylic{
227
227
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -229,7 +229,7 @@
229
229
  }
230
230
  .block[data-size=s]{
231
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)));
232
+ padding:var(--sn-block-anatomy-s-padding, var(--sn-density-spacing-block-s-padding, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
233
233
  border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
234
234
  }
235
235
  .block[data-size=s][data-view=outline] .borderLayer{
@@ -237,7 +237,7 @@
237
237
  }
238
238
  .block[data-size=m]{
239
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)));
240
+ padding:var(--sn-block-anatomy-m-padding, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
241
241
  border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
242
242
  }
243
243
  .block[data-size=m][data-view=outline] .borderLayer{
@@ -245,7 +245,7 @@
245
245
  }
246
246
  .block[data-size=l]{
247
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)));
248
+ padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
249
249
  border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
250
250
  }
251
251
  .block[data-size=l][data-view=outline] .borderLayer{
package/dist/esm/style.css CHANGED
@@ -19,209 +19,209 @@
19
19
  border-radius:inherit;
20
20
  }
21
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)));
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-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)));
23
23
  }
24
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)));
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-spread, 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-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
26
26
  }
27
27
  .block[data-acrylic-appearance=primary][data-acrylic-level=default]{
28
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
28
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
29
29
  }
30
30
  .block[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
31
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))));
32
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
33
33
  }
34
34
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
35
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
35
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
36
36
  }
37
37
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
38
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))));
39
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
40
40
  }
41
41
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
42
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
42
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
43
43
  }
44
44
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
45
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))));
46
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
47
47
  }
48
48
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default]{
49
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
49
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
50
50
  }
51
51
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
52
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)));
53
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
54
54
  }
55
55
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
56
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
56
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
57
57
  }
58
58
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
59
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)));
60
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
61
61
  }
62
62
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
63
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
63
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
64
64
  }
65
65
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
66
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)));
67
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
68
  }
69
69
  .block[data-acrylic-appearance=red][data-acrylic-level=default]{
70
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
70
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
71
71
  }
72
72
  .block[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
73
73
  opacity:var(--sn-acrylic-opacityBackground, 1);
74
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
74
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
75
75
  }
76
76
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
77
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
77
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
78
78
  }
79
79
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
80
80
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
81
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
81
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
82
82
  }
83
83
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
84
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
84
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
85
85
  }
86
86
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
87
87
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
88
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
88
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
89
89
  }
90
90
  .block[data-acrylic-appearance=orange][data-acrylic-level=default]{
91
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
91
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
92
92
  }
93
93
  .block[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
94
94
  opacity:var(--sn-acrylic-opacityBackground, 1);
95
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
95
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
96
96
  }
97
97
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
98
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
98
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
99
99
  }
100
100
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
101
101
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
102
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
102
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
103
103
  }
104
104
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
105
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
105
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
106
106
  }
107
107
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
108
108
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
109
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
109
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
110
110
  }
111
111
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default]{
112
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
112
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
113
113
  }
114
114
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
115
115
  opacity:var(--sn-acrylic-opacityBackground, 1);
116
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
116
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
117
117
  }
118
118
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
119
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
119
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
120
120
  }
121
121
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
122
122
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
123
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
123
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
124
124
  }
125
125
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
126
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
126
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
127
127
  }
128
128
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
129
129
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
130
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
130
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
131
131
  }
132
132
  .block[data-acrylic-appearance=green][data-acrylic-level=default]{
133
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
133
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
134
134
  }
135
135
  .block[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
136
136
  opacity:var(--sn-acrylic-opacityBackground, 1);
137
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
137
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
138
138
  }
139
139
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
140
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
140
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
141
141
  }
142
142
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
143
143
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
144
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
144
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
145
145
  }
146
146
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
147
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
147
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
148
148
  }
149
149
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
150
150
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
151
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
151
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
152
152
  }
153
153
  .block[data-acrylic-appearance=blue][data-acrylic-level=default]{
154
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
154
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
155
155
  }
156
156
  .block[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
157
157
  opacity:var(--sn-acrylic-opacityBackground, 1);
158
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
158
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
159
159
  }
160
160
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
161
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
161
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
162
162
  }
163
163
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
164
164
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
165
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
165
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
166
166
  }
167
167
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
168
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
168
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
169
169
  }
170
170
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
171
171
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
172
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
172
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
173
173
  }
174
174
  .block[data-acrylic-appearance=violet][data-acrylic-level=default]{
175
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
175
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
176
176
  }
177
177
  .block[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
178
178
  opacity:var(--sn-acrylic-opacityBackground, 1);
179
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
179
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
180
180
  }
181
181
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
182
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
182
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
183
183
  }
184
184
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
185
185
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
186
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
186
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
187
187
  }
188
188
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
189
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
189
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
190
190
  }
191
191
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
192
192
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
193
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
193
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
194
194
  }
195
195
  .block[data-acrylic-appearance=pink][data-acrylic-level=default]{
196
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
196
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
197
197
  }
198
198
  .block[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
199
199
  opacity:var(--sn-acrylic-opacityBackground, 1);
200
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
200
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
201
201
  }
202
202
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
203
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
203
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
204
204
  }
205
205
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
206
206
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
207
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
207
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
208
208
  }
209
209
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
210
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
210
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
211
211
  }
212
212
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
213
213
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
214
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
214
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
215
215
  }
216
216
  .block[data-acrylic-appearance=transparent]{
217
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
217
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
218
218
  }
219
219
  .block[data-acrylic-appearance=transparent] .acrylic{
220
220
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
221
221
  background:transparent;
222
222
  }
223
223
  .block[data-acrylic-appearance=decorTransparent]{
224
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
224
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
225
225
  }
226
226
  .block[data-acrylic-appearance=decorTransparent] .acrylic{
227
227
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -229,7 +229,7 @@
229
229
  }
230
230
  .block[data-size=s]{
231
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)));
232
+ padding:var(--sn-block-anatomy-s-padding, var(--sn-density-spacing-block-s-padding, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
233
233
  border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
234
234
  }
235
235
  .block[data-size=s][data-view=outline] .borderLayer{
@@ -237,7 +237,7 @@
237
237
  }
238
238
  .block[data-size=m]{
239
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)));
240
+ padding:var(--sn-block-anatomy-m-padding, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
241
241
  border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
242
242
  }
243
243
  .block[data-size=m][data-view=outline] .borderLayer{
@@ -245,7 +245,7 @@
245
245
  }
246
246
  .block[data-size=l]{
247
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)));
248
+ padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
249
249
  border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
250
250
  }
251
251
  .block[data-size=l][data-view=outline] .borderLayer{
package/dist/esm/styles.module.css CHANGED
@@ -19,209 +19,209 @@
19
19
  border-radius:inherit;
20
20
  }
21
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)));
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-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)));
23
23
  }
24
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)));
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-spread, 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-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
26
26
  }
27
27
  .block[data-acrylic-appearance=primary][data-acrylic-level=default]{
28
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
28
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
29
29
  }
30
30
  .block[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
31
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))));
32
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
33
33
  }
34
34
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
35
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
35
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
36
36
  }
37
37
  .block[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
38
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))));
39
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
40
40
  }
41
41
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
42
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
42
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
43
43
  }
44
44
  .block[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
45
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))));
46
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
47
47
  }
48
48
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default]{
49
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
49
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
50
50
  }
51
51
  .block[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
52
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)));
53
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
54
54
  }
55
55
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
56
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
56
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
57
57
  }
58
58
  .block[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
59
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)));
60
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
61
61
  }
62
62
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
63
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
63
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
64
64
  }
65
65
  .block[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
66
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)));
67
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
68
  }
69
69
  .block[data-acrylic-appearance=red][data-acrylic-level=default]{
70
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
70
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
71
71
  }
72
72
  .block[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
73
73
  opacity:var(--sn-acrylic-opacityBackground, 1);
74
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
74
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
75
75
  }
76
76
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
77
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
77
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
78
78
  }
79
79
  .block[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
80
80
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
81
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
81
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
82
82
  }
83
83
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
84
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
84
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
85
85
  }
86
86
  .block[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
87
87
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
88
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
88
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
89
89
  }
90
90
  .block[data-acrylic-appearance=orange][data-acrylic-level=default]{
91
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
91
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
92
92
  }
93
93
  .block[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
94
94
  opacity:var(--sn-acrylic-opacityBackground, 1);
95
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
95
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
96
96
  }
97
97
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
98
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
98
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
99
99
  }
100
100
  .block[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
101
101
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
102
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
102
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
103
103
  }
104
104
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
105
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
105
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
106
106
  }
107
107
  .block[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
108
108
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
109
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
109
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
110
110
  }
111
111
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default]{
112
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
112
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
113
113
  }
114
114
  .block[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
115
115
  opacity:var(--sn-acrylic-opacityBackground, 1);
116
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
116
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
117
117
  }
118
118
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
119
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
119
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
120
120
  }
121
121
  .block[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
122
122
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
123
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
123
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
124
124
  }
125
125
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
126
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
126
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
127
127
  }
128
128
  .block[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
129
129
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
130
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
130
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
131
131
  }
132
132
  .block[data-acrylic-appearance=green][data-acrylic-level=default]{
133
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
133
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
134
134
  }
135
135
  .block[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
136
136
  opacity:var(--sn-acrylic-opacityBackground, 1);
137
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
137
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
138
138
  }
139
139
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
140
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
140
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
141
141
  }
142
142
  .block[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
143
143
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
144
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
144
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
145
145
  }
146
146
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
147
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
147
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
148
148
  }
149
149
  .block[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
150
150
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
151
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
151
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
152
152
  }
153
153
  .block[data-acrylic-appearance=blue][data-acrylic-level=default]{
154
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
154
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
155
155
  }
156
156
  .block[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
157
157
  opacity:var(--sn-acrylic-opacityBackground, 1);
158
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
158
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
159
159
  }
160
160
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
161
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
161
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
162
162
  }
163
163
  .block[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
164
164
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
165
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
165
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
166
166
  }
167
167
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
168
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
168
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
169
169
  }
170
170
  .block[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
171
171
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
172
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
172
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
173
173
  }
174
174
  .block[data-acrylic-appearance=violet][data-acrylic-level=default]{
175
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
175
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
176
176
  }
177
177
  .block[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
178
178
  opacity:var(--sn-acrylic-opacityBackground, 1);
179
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
179
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
180
180
  }
181
181
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
182
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
182
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
183
183
  }
184
184
  .block[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
185
185
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
186
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
186
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
187
187
  }
188
188
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
189
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
189
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
190
190
  }
191
191
  .block[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
192
192
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
193
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
193
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
194
194
  }
195
195
  .block[data-acrylic-appearance=pink][data-acrylic-level=default]{
196
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
196
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
197
197
  }
198
198
  .block[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
199
199
  opacity:var(--sn-acrylic-opacityBackground, 1);
200
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
200
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
201
201
  }
202
202
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
203
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
203
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
204
204
  }
205
205
  .block[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
206
206
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
207
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
207
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
208
208
  }
209
209
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
210
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
210
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
211
211
  }
212
212
  .block[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
213
213
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
214
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
214
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
215
215
  }
216
216
  .block[data-acrylic-appearance=transparent]{
217
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
217
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
218
218
  }
219
219
  .block[data-acrylic-appearance=transparent] .acrylic{
220
220
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
221
221
  background:transparent;
222
222
  }
223
223
  .block[data-acrylic-appearance=decorTransparent]{
224
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
224
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
225
225
  }
226
226
  .block[data-acrylic-appearance=decorTransparent] .acrylic{
227
227
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -229,7 +229,7 @@
229
229
  }
230
230
  .block[data-size=s]{
231
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)));
232
+ padding:var(--sn-block-anatomy-s-padding, var(--sn-density-spacing-block-s-padding, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
233
233
  border-width:var(--sn-block-anatomy-s-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
234
234
  }
235
235
  .block[data-size=s][data-view=outline] .borderLayer{
@@ -237,7 +237,7 @@
237
237
  }
238
238
  .block[data-size=m]{
239
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)));
240
+ padding:var(--sn-block-anatomy-m-padding, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
241
241
  border-width:var(--sn-block-anatomy-m-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
242
242
  }
243
243
  .block[data-size=m][data-view=outline] .borderLayer{
@@ -245,7 +245,7 @@
245
245
  }
246
246
  .block[data-size=l]{
247
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)));
248
+ padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
249
249
  border-width:var(--sn-block-anatomy-l-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
250
250
  }
251
251
  .block[data-size=l][data-view=outline] .borderLayer{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-block",
3
- "version": "1.0.1",
3
+ "version": "1.0.2-preview-a2208aeb.0",
4
4
  "description": "Слот-поверхность с акриловым фоном (матовое/полупрозрачное стекло) для композиции содержимого на разных подложках.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,8 +34,8 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "classnames": "^2.5.1",
37
- "@cloud-ru/ds-materials": "^1.0.1",
38
- "@cloud-ru/ds-utils": "^1.1.0"
37
+ "@cloud-ru/ds-materials": "1.0.2-preview-a2208aeb.0",
38
+ "@cloud-ru/ds-utils": "1.1.0"
39
39
  },
40
40
  "publishConfig": {
41
41
  "access": "public"