@splendidlabz/styles 4.8.2 → 4.9.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 (15) hide show
  1. package/package.json +2 -2
  2. package/src/components/css/prose.css +60 -68
  3. package/src/effects/elevation.css +303 -214
  4. package/src/effects/fancybox.css +31 -33
  5. package/src/effects/frosted-glass.css +27 -31
  6. package/src/effects/gradients.css +34 -30
  7. package/src/effects/shadows.css +99 -18
  8. package/src/effects/text.css +0 -3
  9. package/src/layouts/micro/stack.css +59 -36
  10. package/src/layouts/position/nudge.css +3 -3
  11. package/src/layouts/position/pos.css +10 -14
  12. package/src/tools/index.css +1 -0
  13. package/src/tools/interact.css +29 -0
  14. package/src/tools/transitions.css +17 -23
  15. package/src/variables/harmonious-type.css +47 -0
package/src/effects/elevation.css CHANGED
@@ -2,289 +2,378 @@
2
2
  :root {
3
3
  --shadow-x: 0px;
4
4
  --shadow-y: 1px;
5
- --shadow-blur: 1px;
5
+ --shadow-spread: 0px;
6
6
  --shadow-color: rgb(0 0 0);
7
7
  --shadow-alpha: 0.25;
8
8
  --shadow-x-multiple: 2;
9
9
  --shadow-y-multiple: 2;
10
- --shadow-blur-multiple: 2;
10
+ --shadow-spread-multiple: 2;
11
11
  }
12
12
 
13
13
  @utility elevation {
14
- & {
15
- --sx: var(--shadow-x);
16
- --sy: var(--shadow-y);
17
- --sb: var(--shadow-blur);
18
- --sc: var(--shadow-color);
19
- --sa: var(--shadow-alpha);
20
- --sx-multiple: var(--shadow-x-multiple);
21
- --sy-multiple: var(--shadow-y-multiple);
22
- --sb-multiple: var(--shadow-blur-multiple);
14
+ --sx: var(--shadow-x);
15
+ --sy: var(--shadow-y);
16
+ --sb: var(--shadow-blur, max(abs(var(--sx)), abs(var(--sy))));
17
+ --ss: var(--shadow-spread);
18
+ --sc: var(--shadow-color);
19
+ --sa: var(--shadow-alpha);
20
+ --sx-multiple: var(--shadow-x-multiple);
21
+ --sy-multiple: var(--shadow-y-multiple);
22
+ --sb-multiple: var(
23
+ --shadow-blur-multiple,
24
+ max(var(--sx-multiple), var(--sy-multiple))
25
+ );
26
+ --ss-multiple: var(--shadow-spread-multiple);
27
+
28
+ &:where(:not(.shadow-before, .shadow-after)) {
29
+ box-shadow: var(--shadow-string);
23
30
  }
24
31
  }
25
32
 
26
33
  @utility elevation-1 {
27
- & {
28
- @apply elevation;
29
- box-shadow: var(--sx) var(--sy) var(--sb)
30
- oklch(from var(--sc) l c h / var(--sa));
31
- }
34
+ @apply elevation;
35
+ --shadow-string: var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
36
+ oklch(from var(--sc) l c h / var(--sa));
32
37
  }
33
38
 
34
39
  @utility elevation-2 {
35
- & {
36
- @apply elevation;
37
- box-shadow:
38
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
40
+ @apply elevation;
41
+ --shadow-string:
42
+ var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
43
+ oklch(from var(--sc) l c h / var(--sa)),
44
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
45
+ calc(var(--sy) * pow(var(--sy-multiple), 1))
46
+ calc(var(--sb) * pow(var(--sb-multiple), 1))
47
+ calc(var(--ss) * pow(var(--ss-multiple), 1))
48
+ oklch(from var(--sc) l c h / var(--sa));
49
+ }
50
+
51
+ @utility elevation-3 {
52
+ @apply elevation;
53
+ --shadow-string:
54
+ var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
55
+ oklch(from var(--sc) l c h / var(--sa)),
56
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
57
+ calc(var(--sy) * pow(var(--sy-multiple), 1))
58
+ calc(var(--sb) * pow(var(--sb-multiple), 1))
59
+ calc(var(--ss) * pow(var(--ss-multiple), 1))
60
+ oklch(from var(--sc) l c h / var(--sa)),
61
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
62
+ calc(var(--sy) * pow(var(--sy-multiple), 2))
63
+ calc(var(--sb) * pow(var(--sb-multiple), 2))
64
+ calc(var(--ss) * pow(var(--ss-multiple), 2))
65
+ oklch(from var(--sc) l c h / var(--sa));
66
+ }
67
+
68
+ @utility elevation-4 {
69
+ @apply elevation;
70
+ --shadow-string:
71
+ var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
72
+ oklch(from var(--sc) l c h / var(--sa)),
73
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
74
+ calc(var(--sy) * pow(var(--sy-multiple), 1))
75
+ calc(var(--sb) * pow(var(--sb-multiple), 1))
76
+ calc(var(--ss) * pow(var(--ss-multiple), 1))
77
+ oklch(from var(--sc) l c h / var(--sa)),
78
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
79
+ calc(var(--sy) * pow(var(--sy-multiple), 2))
80
+ calc(var(--sb) * pow(var(--sb-multiple), 2))
81
+ calc(var(--ss) * pow(var(--ss-multiple), 2))
82
+ oklch(from var(--sc) l c h / var(--sa)),
83
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
84
+ calc(var(--sy) * pow(var(--sy-multiple), 3))
85
+ calc(var(--sb) * pow(var(--sb-multiple), 3))
86
+ calc(var(--ss) * pow(var(--ss-multiple), 3))
87
+ oklch(from var(--sc) l c h / var(--sa));
88
+ }
89
+
90
+ @utility elevation-5 {
91
+ @apply elevation;
92
+ --shadow-string:
93
+ var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
94
+ oklch(from var(--sc) l c h / var(--sa)),
95
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
96
+ calc(var(--sy) * pow(var(--sy-multiple), 1))
97
+ calc(var(--sb) * pow(var(--sb-multiple), 1))
98
+ calc(var(--ss) * pow(var(--ss-multiple), 1))
99
+ oklch(from var(--sc) l c h / var(--sa)),
100
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
101
+ calc(var(--sy) * pow(var(--sy-multiple), 2))
102
+ calc(var(--sb) * pow(var(--sb-multiple), 2))
103
+ calc(var(--ss) * pow(var(--ss-multiple), 2))
104
+ oklch(from var(--sc) l c h / var(--sa)),
105
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
106
+ calc(var(--sy) * pow(var(--sy-multiple), 3))
107
+ calc(var(--sb) * pow(var(--sb-multiple), 3))
108
+ calc(var(--ss) * pow(var(--ss-multiple), 3))
109
+ oklch(from var(--sc) l c h / var(--sa)),
110
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 4))
111
+ calc(var(--sy) * pow(var(--sy-multiple), 4))
112
+ calc(var(--sb) * pow(var(--sb-multiple), 4))
113
+ calc(var(--ss) * pow(var(--ss-multiple), 4))
114
+ oklch(from var(--sc) l c h / var(--sa));
115
+ }
116
+
117
+ @utility elevation-6 {
118
+ @apply elevation;
119
+ --shadow-string:
120
+ var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
121
+ oklch(from var(--sc) l c h / var(--sa)),
122
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
123
+ calc(var(--sy) * pow(var(--sy-multiple), 1))
124
+ calc(var(--sb) * pow(var(--sb-multiple), 1))
125
+ calc(var(--ss) * pow(var(--ss-multiple), 1))
126
+ oklch(from var(--sc) l c h / var(--sa)),
127
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
128
+ calc(var(--sy) * pow(var(--sy-multiple), 2))
129
+ calc(var(--sb) * pow(var(--sb-multiple), 2))
130
+ calc(var(--ss) * pow(var(--ss-multiple), 2))
131
+ oklch(from var(--sc) l c h / var(--sa)),
132
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
133
+ calc(var(--sy) * pow(var(--sy-multiple), 3))
134
+ calc(var(--sb) * pow(var(--sb-multiple), 3))
135
+ calc(var(--ss) * pow(var(--ss-multiple), 3))
136
+ oklch(from var(--sc) l c h / var(--sa)),
137
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 4))
138
+ calc(var(--sy) * pow(var(--sy-multiple), 4))
139
+ calc(var(--sb) * pow(var(--sb-multiple), 4))
140
+ calc(var(--ss) * pow(var(--ss-multiple), 4))
141
+ oklch(from var(--sc) l c h / var(--sa)),
142
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 5))
143
+ calc(var(--sy) * pow(var(--sy-multiple), 5))
144
+ calc(var(--sb) * pow(var(--sb-multiple), 5))
145
+ calc(var(--ss) * pow(var(--ss-multiple), 5))
146
+ oklch(from var(--sc) l c h / var(--sa));
147
+ }
148
+
149
+ @utility elevation-7 {
150
+ @apply elevation;
151
+ --shadow-string:
152
+ var(--shadow-inset,) var(--sx) var(--sy) var(--sb) var(--ss)
153
+ oklch(from var(--sc) l c h / var(--sa)),
154
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 1))
155
+ calc(var(--sy) * pow(var(--sy-multiple), 1))
156
+ calc(var(--sb) * pow(var(--sb-multiple), 1))
157
+ calc(var(--ss) * pow(var(--ss-multiple), 1))
158
+ oklch(from var(--sc) l c h / var(--sa)),
159
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 2))
160
+ calc(var(--sy) * pow(var(--sy-multiple), 2))
161
+ calc(var(--sb) * pow(var(--sb-multiple), 2))
162
+ calc(var(--ss) * pow(var(--ss-multiple), 2))
163
+ oklch(from var(--sc) l c h / var(--sa)),
164
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 3))
165
+ calc(var(--sy) * pow(var(--sy-multiple), 3))
166
+ calc(var(--sb) * pow(var(--sb-multiple), 3))
167
+ calc(var(--ss) * pow(var(--ss-multiple), 3))
168
+ oklch(from var(--sc) l c h / var(--sa)),
169
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 4))
170
+ calc(var(--sy) * pow(var(--sy-multiple), 4))
171
+ calc(var(--sb) * pow(var(--sb-multiple), 4))
172
+ calc(var(--ss) * pow(var(--ss-multiple), 4))
173
+ oklch(from var(--sc) l c h / var(--sa)),
174
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 5))
175
+ calc(var(--sy) * pow(var(--sy-multiple), 5))
176
+ calc(var(--sb) * pow(var(--sb-multiple), 5))
177
+ calc(var(--ss) * pow(var(--ss-multiple), 5))
178
+ oklch(from var(--sc) l c h / var(--sa)),
179
+ var(--shadow-inset,) calc(var(--sx) * pow(var(--sx-multiple), 6))
180
+ calc(var(--sy) * pow(var(--sy-multiple), 6))
181
+ calc(var(--sb) * pow(var(--sb-multiple), 6))
182
+ calc(var(--ss) * pow(var(--ss-multiple), 6))
183
+ oklch(from var(--sc) l c h / var(--sa));
184
+ }
185
+
186
+ /*********************
187
+ * Elevation with Drop Shadow *
188
+ *********************/
189
+ @utility ds-elevation {
190
+ --sx: var(--drop-shadow-x, var(--shadow-x));
191
+ --sy: var(--drop-shadow-y, var(--shadow-y));
192
+ --sb: var(
193
+ --drop-shadow-blur,
194
+ var(--shadow-blur, max(abs(var(--sx)), abs(var(--sy))))
195
+ );
196
+ --sc: var(--drop-shadow-color, var(--shadow-color));
197
+ --sa: var(--drop-shadow-alpha, var(--shadow-alpha));
198
+ --sx-multiple: var(--drop-shadow-x-multiple, var(--shadow-x-multiple));
199
+ --sy-multiple: var(--drop-shadow-y-multiple, var(--shadow-y-multiple));
200
+ --sb-multiple: var(
201
+ --drop-shadow-blur-multiple,
202
+ var(--shadow-blur-multiple, max(var(--sx-multiple), var(--sy-multiple)))
203
+ );
204
+ }
205
+
206
+ @utility ds-elevation-1 {
207
+ @apply ds-elevation;
208
+ filter: drop-shadow(
209
+ var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
210
+ );
211
+ }
212
+
213
+ @utility ds-elevation-2 {
214
+ @apply ds-elevation;
215
+ filter: drop-shadow(
216
+ var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
217
+ )
218
+ drop-shadow(
39
219
  calc(var(--sx) * pow(var(--sx-multiple), 1))
40
220
  calc(var(--sy) * pow(var(--sy-multiple), 1))
41
221
  calc(var(--sb) * pow(var(--sb-multiple), 1))
42
- oklch(from var(--sc) l c h / var(--sa));
43
- }
222
+ oklch(from var(--sc) l c h / var(--sa))
223
+ );
44
224
  }
45
225
 
46
- @utility elevation-3 {
47
- & {
48
- @apply elevation;
49
- box-shadow:
50
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
226
+ @utility ds-elevation-3 {
227
+ @apply ds-elevation;
228
+ filter: drop-shadow(
229
+ var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
230
+ )
231
+ drop-shadow(
51
232
  calc(var(--sx) * pow(var(--sx-multiple), 1))
52
233
  calc(var(--sy) * pow(var(--sy-multiple), 1))
53
234
  calc(var(--sb) * pow(var(--sb-multiple), 1))
54
- oklch(from var(--sc) l c h / var(--sa)),
235
+ oklch(from var(--sc) l c h / var(--sa))
236
+ )
237
+ drop-shadow(
55
238
  calc(var(--sx) * pow(var(--sx-multiple), 2))
56
239
  calc(var(--sy) * pow(var(--sy-multiple), 2))
57
240
  calc(var(--sb) * pow(var(--sb-multiple), 2))
58
- oklch(from var(--sc) l c h / var(--sa));
59
- }
241
+ oklch(from var(--sc) l c h / var(--sa))
242
+ );
60
243
  }
61
244
 
62
- @utility elevation-4 {
63
- & {
64
- @apply elevation;
65
- box-shadow:
66
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
245
+ @utility ds-elevation-4 {
246
+ @apply ds-elevation;
247
+ filter: drop-shadow(
248
+ var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
249
+ )
250
+ drop-shadow(
67
251
  calc(var(--sx) * pow(var(--sx-multiple), 1))
68
252
  calc(var(--sy) * pow(var(--sy-multiple), 1))
69
253
  calc(var(--sb) * pow(var(--sb-multiple), 1))
70
- oklch(from var(--sc) l c h / var(--sa)),
254
+ oklch(from var(--sc) l c h / var(--sa))
255
+ )
256
+ drop-shadow(
71
257
  calc(var(--sx) * pow(var(--sx-multiple), 2))
72
258
  calc(var(--sy) * pow(var(--sy-multiple), 2))
73
259
  calc(var(--sb) * pow(var(--sb-multiple), 2))
74
- oklch(from var(--sc) l c h / var(--sa)),
260
+ oklch(from var(--sc) l c h / var(--sa))
261
+ )
262
+ drop-shadow(
75
263
  calc(var(--sx) * pow(var(--sx-multiple), 3))
76
264
  calc(var(--sy) * pow(var(--sy-multiple), 3))
77
265
  calc(var(--sb) * pow(var(--sb-multiple), 3))
78
- oklch(from var(--sc) l c h / var(--sa));
79
- }
266
+ oklch(from var(--sc) l c h / var(--sa))
267
+ );
80
268
  }
81
269
 
82
- @utility elevation-5 {
83
- & {
84
- @apply elevation;
85
- box-shadow:
86
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
270
+ @utility ds-elevation-5 {
271
+ @apply ds-elevation;
272
+ filter: drop-shadow(
273
+ var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
274
+ )
275
+ drop-shadow(
87
276
  calc(var(--sx) * pow(var(--sx-multiple), 1))
88
277
  calc(var(--sy) * pow(var(--sy-multiple), 1))
89
278
  calc(var(--sb) * pow(var(--sb-multiple), 1))
90
- oklch(from var(--sc) l c h / var(--sa)),
279
+ oklch(from var(--sc) l c h / var(--sa))
280
+ )
281
+ drop-shadow(
91
282
  calc(var(--sx) * pow(var(--sx-multiple), 2))
92
283
  calc(var(--sy) * pow(var(--sy-multiple), 2))
93
284
  calc(var(--sb) * pow(var(--sb-multiple), 2))
94
- oklch(from var(--sc) l c h / var(--sa)),
285
+ oklch(from var(--sc) l c h / var(--sa))
286
+ )
287
+ drop-shadow(
95
288
  calc(var(--sx) * pow(var(--sx-multiple), 3))
96
289
  calc(var(--sy) * pow(var(--sy-multiple), 3))
97
290
  calc(var(--sb) * pow(var(--sb-multiple), 3))
98
- oklch(from var(--sc) l c h / var(--sa)),
291
+ oklch(from var(--sc) l c h / var(--sa))
292
+ )
293
+ drop-shadow(
99
294
  calc(var(--sx) * pow(var(--sx-multiple), 4))
100
295
  calc(var(--sy) * pow(var(--sy-multiple), 4))
101
296
  calc(var(--sb) * pow(var(--sb-multiple), 4))
102
- oklch(from var(--sc) l c h / var(--sa));
103
- }
297
+ oklch(from var(--sc) l c h / var(--sa))
298
+ );
104
299
  }
105
300
 
106
- @utility elevation-6 {
107
- & {
108
- @apply elevation;
109
- box-shadow:
110
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa)),
301
+ @utility ds-elevation-6 {
302
+ @apply ds-elevation;
303
+ filter: drop-shadow(
304
+ var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
305
+ )
306
+ drop-shadow(
111
307
  calc(var(--sx) * pow(var(--sx-multiple), 1))
112
308
  calc(var(--sy) * pow(var(--sy-multiple), 1))
113
309
  calc(var(--sb) * pow(var(--sb-multiple), 1))
114
- oklch(from var(--sc) l c h / var(--sa)),
310
+ oklch(from var(--sc) l c h / var(--sa))
311
+ )
312
+ drop-shadow(
115
313
  calc(var(--sx) * pow(var(--sx-multiple), 2))
116
314
  calc(var(--sy) * pow(var(--sy-multiple), 2))
117
315
  calc(var(--sb) * pow(var(--sb-multiple), 2))
118
- oklch(from var(--sc) l c h / var(--sa)),
316
+ oklch(from var(--sc) l c h / var(--sa))
317
+ )
318
+ drop-shadow(
119
319
  calc(var(--sx) * pow(var(--sx-multiple), 3))
120
320
  calc(var(--sy) * pow(var(--sy-multiple), 3))
121
321
  calc(var(--sb) * pow(var(--sb-multiple), 3))
122
- oklch(from var(--sc) l c h / var(--sa)),
322
+ oklch(from var(--sc) l c h / var(--sa))
323
+ )
324
+ drop-shadow(
123
325
  calc(var(--sx) * pow(var(--sx-multiple), 4))
124
326
  calc(var(--sy) * pow(var(--sy-multiple), 4))
125
327
  calc(var(--sb) * pow(var(--sb-multiple), 4))
126
- oklch(from var(--sc) l c h / var(--sa)),
328
+ oklch(from var(--sc) l c h / var(--sa))
329
+ )
330
+ drop-shadow(
127
331
  calc(var(--sx) * pow(var(--sx-multiple), 5))
128
332
  calc(var(--sy) * pow(var(--sy-multiple), 5))
129
333
  calc(var(--sb) * pow(var(--sb-multiple), 5))
130
- oklch(from var(--sc) l c h / var(--sa));
131
- }
132
- }
133
-
134
- /*********************
135
- * Elevation with Drop Shadow *
136
- *********************/
137
- @utility ds-elevation {
138
- --sx: var(--drop-shadow-x, var(--shadow-x));
139
- --sy: var(--drop-shadow-y, var(--shadow-y));
140
- --sb: var(--drop-shadow-blur, var(--shadow-blur));
141
- --sc: var(--drop-shadow-color, var(--shadow-color));
142
- --sa: var(--drop-shadow-alpha, var(--shadow-alpha));
143
- --sx-multiple: var(--drop-shadow-x-multiple, var(--shadow-x-multiple));
144
- --sy-multiple: var(--drop-shadow-y-multiple, var(--shadow-y-multiple));
145
- --sb-multiple: var(--drop-shadow-blur-multiple, var(--shadow-blur-multiple));
334
+ oklch(from var(--sc) l c h / var(--sa))
335
+ );
146
336
  }
147
337
 
148
- @utility ds-elevation-1 {
149
- & {
150
- @apply ds-elevation;
151
- filter: drop-shadow(
338
+ @utility ds-elevation-7 {
339
+ @apply ds-elevation;
340
+ filter: drop-shadow(
152
341
  var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
342
+ )
343
+ drop-shadow(
344
+ calc(var(--sx) * pow(var(--sx-multiple), 1))
345
+ calc(var(--sy) * pow(var(--sy-multiple), 1))
346
+ calc(var(--sb) * pow(var(--sb-multiple), 1))
347
+ oklch(from var(--sc) l c h / var(--sa))
348
+ )
349
+ drop-shadow(
350
+ calc(var(--sx) * pow(var(--sx-multiple), 2))
351
+ calc(var(--sy) * pow(var(--sy-multiple), 2))
352
+ calc(var(--sb) * pow(var(--sb-multiple), 2))
353
+ oklch(from var(--sc) l c h / var(--sa))
354
+ )
355
+ drop-shadow(
356
+ calc(var(--sx) * pow(var(--sx-multiple), 3))
357
+ calc(var(--sy) * pow(var(--sy-multiple), 3))
358
+ calc(var(--sb) * pow(var(--sb-multiple), 3))
359
+ oklch(from var(--sc) l c h / var(--sa))
360
+ )
361
+ drop-shadow(
362
+ calc(var(--sx) * pow(var(--sx-multiple), 4))
363
+ calc(var(--sy) * pow(var(--sy-multiple), 4))
364
+ calc(var(--sb) * pow(var(--sb-multiple), 4))
365
+ oklch(from var(--sc) l c h / var(--sa))
366
+ )
367
+ drop-shadow(
368
+ calc(var(--sx) * pow(var(--sx-multiple), 5))
369
+ calc(var(--sy) * pow(var(--sy-multiple), 5))
370
+ calc(var(--sb) * pow(var(--sb-multiple), 5))
371
+ oklch(from var(--sc) l c h / var(--sa))
372
+ )
373
+ drop-shadow(
374
+ calc(var(--sx) * pow(var(--sx-multiple), 6))
375
+ calc(var(--sy) * pow(var(--sy-multiple), 6))
376
+ calc(var(--sb) * pow(var(--sb-multiple), 6))
377
+ oklch(from var(--sc) l c h / var(--sa))
153
378
  );
154
- }
155
- }
156
-
157
- @utility ds-elevation-2 {
158
- & {
159
- @apply ds-elevation;
160
- filter: drop-shadow(
161
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
162
- )
163
- drop-shadow(
164
- calc(var(--sx) * pow(var(--sx-multiple), 1))
165
- calc(var(--sy) * pow(var(--sy-multiple), 1))
166
- calc(var(--sb) * pow(var(--sb-multiple), 1))
167
- oklch(from var(--sc) l c h / var(--sa))
168
- );
169
- }
170
- }
171
-
172
- @utility ds-elevation-3 {
173
- & {
174
- @apply ds-elevation;
175
- filter: drop-shadow(
176
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
177
- )
178
- drop-shadow(
179
- calc(var(--sx) * pow(var(--sx-multiple), 1))
180
- calc(var(--sy) * pow(var(--sy-multiple), 1))
181
- calc(var(--sb) * pow(var(--sb-multiple), 1))
182
- oklch(from var(--sc) l c h / var(--sa))
183
- )
184
- drop-shadow(
185
- calc(var(--sx) * pow(var(--sx-multiple), 2))
186
- calc(var(--sy) * pow(var(--sy-multiple), 2))
187
- calc(var(--sb) * pow(var(--sb-multiple), 2))
188
- oklch(from var(--sc) l c h / var(--sa))
189
- );
190
- }
191
- }
192
-
193
- @utility ds-elevation-4 {
194
- & {
195
- @apply ds-elevation;
196
- filter: drop-shadow(
197
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
198
- )
199
- drop-shadow(
200
- calc(var(--sx) * pow(var(--sx-multiple), 1))
201
- calc(var(--sy) * pow(var(--sy-multiple), 1))
202
- calc(var(--sb) * pow(var(--sb-multiple), 1))
203
- oklch(from var(--sc) l c h / var(--sa))
204
- )
205
- drop-shadow(
206
- calc(var(--sx) * pow(var(--sx-multiple), 2))
207
- calc(var(--sy) * pow(var(--sy-multiple), 2))
208
- calc(var(--sb) * pow(var(--sb-multiple), 2))
209
- oklch(from var(--sc) l c h / var(--sa))
210
- )
211
- drop-shadow(
212
- calc(var(--sx) * pow(var(--sx-multiple), 3))
213
- calc(var(--sy) * pow(var(--sy-multiple), 3))
214
- calc(var(--sb) * pow(var(--sb-multiple), 3))
215
- oklch(from var(--sc) l c h / var(--sa))
216
- );
217
- }
218
- }
219
-
220
- @utility ds-elevation-5 {
221
- & {
222
- @apply ds-elevation;
223
- filter: drop-shadow(
224
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
225
- )
226
- drop-shadow(
227
- calc(var(--sx) * pow(var(--sx-multiple), 1))
228
- calc(var(--sy) * pow(var(--sy-multiple), 1))
229
- calc(var(--sb) * pow(var(--sb-multiple), 1))
230
- oklch(from var(--sc) l c h / var(--sa))
231
- )
232
- drop-shadow(
233
- calc(var(--sx) * pow(var(--sx-multiple), 2))
234
- calc(var(--sy) * pow(var(--sy-multiple), 2))
235
- calc(var(--sb) * pow(var(--sb-multiple), 2))
236
- oklch(from var(--sc) l c h / var(--sa))
237
- )
238
- drop-shadow(
239
- calc(var(--sx) * pow(var(--sx-multiple), 3))
240
- calc(var(--sy) * pow(var(--sy-multiple), 3))
241
- calc(var(--sb) * pow(var(--sb-multiple), 3))
242
- oklch(from var(--sc) l c h / var(--sa))
243
- )
244
- drop-shadow(
245
- calc(var(--sx) * pow(var(--sx-multiple), 4))
246
- calc(var(--sy) * pow(var(--sy-multiple), 4))
247
- calc(var(--sb) * pow(var(--sb-multiple), 4))
248
- oklch(from var(--sc) l c h / var(--sa))
249
- );
250
- }
251
- }
252
-
253
- @utility ds-elevation-6 {
254
- & {
255
- @apply ds-elevation;
256
- filter: drop-shadow(
257
- var(--sx) var(--sy) var(--sb) oklch(from var(--sc) l c h / var(--sa))
258
- )
259
- drop-shadow(
260
- calc(var(--sx) * pow(var(--sx-multiple), 1))
261
- calc(var(--sy) * pow(var(--sy-multiple), 1))
262
- calc(var(--sb) * pow(var(--sb-multiple), 1))
263
- oklch(from var(--sc) l c h / var(--sa))
264
- )
265
- drop-shadow(
266
- calc(var(--sx) * pow(var(--sx-multiple), 2))
267
- calc(var(--sy) * pow(var(--sy-multiple), 2))
268
- calc(var(--sb) * pow(var(--sb-multiple), 2))
269
- oklch(from var(--sc) l c h / var(--sa))
270
- )
271
- drop-shadow(
272
- calc(var(--sx) * pow(var(--sx-multiple), 3))
273
- calc(var(--sy) * pow(var(--sy-multiple), 3))
274
- calc(var(--sb) * pow(var(--sb-multiple), 3))
275
- oklch(from var(--sc) l c h / var(--sa))
276
- )
277
- drop-shadow(
278
- calc(var(--sx) * pow(var(--sx-multiple), 4))
279
- calc(var(--sy) * pow(var(--sy-multiple), 4))
280
- calc(var(--sb) * pow(var(--sb-multiple), 4))
281
- oklch(from var(--sc) l c h / var(--sa))
282
- )
283
- drop-shadow(
284
- calc(var(--sx) * pow(var(--sx-multiple), 5))
285
- calc(var(--sy) * pow(var(--sy-multiple), 5))
286
- calc(var(--sb) * pow(var(--sb-multiple), 5))
287
- oklch(from var(--sc) l c h / var(--sa))
288
- );
289
- }
290
379
  }
package/src/effects/fancybox.css CHANGED
@@ -14,40 +14,38 @@
14
14
 
15
15
  /* Useful for creating gradient border with solid color within. Not very useful if you wanna stack gradients together and bleed it out. */
16
16
  @utility fancybox {
17
- & {
18
- @apply border-scaffold;
19
- --b: var(--border-width);
20
- --r: var(--radius);
21
- --_inner-gradient: linear-gradient(
22
- var(--inner-gradient-angle, var(--gradient-angle)) in
23
- var(--inner-gradient-color-space, var(--color-space))
24
- var(--inner-gradient-hue-interpolation, var(--hue-interpolation)),
25
- var(
26
- --inner-gradient,
27
- var(--bg-color, transparent),
28
- var(--bg-color, transparent)
29
- )
30
- );
31
- --_outer-gradient: linear-gradient(
32
- var(--outer-gradient-angle, var(--gradient-angle)) in
33
- var(--outer-gradient-color-space, var(--color-space))
34
- var(--outer-gradient-hue-interpolation, var(--hue-interpolation)),
35
- var(
36
- --outer-gradient,
37
- var(--border-color, transparent),
38
- var(--border-color, transparent)
39
- )
40
- );
41
- position: relative;
42
- border-width: var(--b);
43
- border-color: transparent;
44
- color: var(--text-color);
45
- background:
46
- padding-box var(--_inner-gradient),
47
- border-box var(--_outer-gradient);
17
+ @apply border-scaffold;
18
+ --b: var(--border-width);
19
+ --r: var(--radius);
20
+ --_inner-gradient: linear-gradient(
21
+ var(--inner-gradient-angle, var(--gradient-angle)) in
22
+ var(--inner-gradient-color-space, var(--color-space))
23
+ var(--inner-gradient-hue-interpolation, var(--hue-interpolation)),
24
+ var(
25
+ --inner-gradient,
26
+ var(--bg-color, transparent),
27
+ var(--bg-color, transparent)
28
+ )
29
+ );
30
+ --_outer-gradient: linear-gradient(
31
+ var(--outer-gradient-angle, var(--gradient-angle)) in
32
+ var(--outer-gradient-color-space, var(--color-space))
33
+ var(--outer-gradient-hue-interpolation, var(--hue-interpolation)),
34
+ var(
35
+ --outer-gradient,
36
+ var(--border-color, transparent),
37
+ var(--border-color, transparent)
38
+ )
39
+ );
40
+ position: relative;
41
+ border-width: var(--b);
42
+ border-color: transparent;
43
+ color: var(--text-color);
44
+ background:
45
+ padding-box var(--_inner-gradient),
46
+ border-box var(--_outer-gradient);
48
47
 
49
- /* animation: rotate-angle 10s linear infinite paused; */
50
- }
48
+ /* animation: rotate-angle 10s linear infinite paused; */
51
49
  }
52
50
 
53
51
  /* Creates a border on the fancybox so the gradient bleeds onto the border. */