@splendidlabz/styles 4.8.2 → 4.10.1
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.
- package/package.json +2 -2
- package/scripts/all.js +3 -0
- package/scripts/index.js +1 -0
- package/scripts/spotlight.js +93 -0
- package/src/components/css/prose.css +60 -68
- package/src/components/css/simple-svg.css +10 -13
- package/src/components/css/strikethrough.css +25 -0
- package/src/components/css/writing-mode.css +18 -22
- package/src/components/svelte/browserframe.css +4 -0
- package/src/effects/bezel.css +334 -0
- package/src/effects/elevation.css +303 -214
- package/src/effects/fancybox.css +31 -36
- package/src/effects/frosted-glass.css +27 -31
- package/src/effects/gradients.css +88 -43
- package/src/effects/highlight.css +129 -10
- package/src/effects/index.css +2 -0
- package/src/effects/inner-border.css +8 -14
- package/src/effects/shadows.css +260 -25
- package/src/effects/testgb.css +372 -0
- package/src/effects/text.css +8 -43
- package/src/layouts/micro/breakout.css +7 -7
- package/src/layouts/micro/inner-spacing.css +6 -6
- package/src/layouts/micro/stack.css +59 -36
- package/src/layouts/position/nudge.css +3 -3
- package/src/layouts/position/pos.css +10 -14
- package/src/tools/color.css +2 -2
- package/src/tools/index.css +1 -0
- package/src/tools/interact.css +35 -0
- package/src/tools/scaffolds.css +24 -24
- package/src/tools/transitions.css +17 -23
- package/src/variables/harmonious-type.css +47 -0
package/src/effects/shadows.css
CHANGED
|
@@ -15,55 +15,245 @@
|
|
|
15
15
|
* --drop-shadow-color: transparent;
|
|
16
16
|
*********************/
|
|
17
17
|
|
|
18
|
+
/*********************
|
|
19
|
+
* Typed properties (animatable)
|
|
20
|
+
* Blur vars are intentionally NOT typed — elevation.css relies on
|
|
21
|
+
* `var(--shadow-blur, max(...))` fallback firing when unset.
|
|
22
|
+
*********************/
|
|
23
|
+
@property --shadow-x {
|
|
24
|
+
syntax: '<length>';
|
|
25
|
+
initial-value: 0;
|
|
26
|
+
inherits: true;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@property --shadow-y {
|
|
30
|
+
syntax: '<length>';
|
|
31
|
+
initial-value: 0;
|
|
32
|
+
inherits: true;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@property --shadow-spread {
|
|
36
|
+
syntax: '<length>';
|
|
37
|
+
initial-value: 0;
|
|
38
|
+
inherits: true;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@property --shadow-color {
|
|
42
|
+
syntax: '<color>';
|
|
43
|
+
initial-value: transparent;
|
|
44
|
+
inherits: true;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@property --shadow-alpha {
|
|
48
|
+
syntax: '<number> | <percentage>';
|
|
49
|
+
initial-value: 1;
|
|
50
|
+
inherits: true;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@property --shadow-x-multiple {
|
|
54
|
+
syntax: '<number>';
|
|
55
|
+
initial-value: 1;
|
|
56
|
+
inherits: true;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@property --shadow-y-multiple {
|
|
60
|
+
syntax: '<number>';
|
|
61
|
+
initial-value: 1;
|
|
62
|
+
inherits: true;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@property --shadow-spread-multiple {
|
|
66
|
+
syntax: '<number>';
|
|
67
|
+
initial-value: 1;
|
|
68
|
+
inherits: true;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@property --text-shadow-x {
|
|
72
|
+
syntax: '<length>';
|
|
73
|
+
initial-value: 0;
|
|
74
|
+
inherits: true;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@property --text-shadow-y {
|
|
78
|
+
syntax: '<length>';
|
|
79
|
+
initial-value: 0;
|
|
80
|
+
inherits: true;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@property --text-shadow-color {
|
|
84
|
+
syntax: '<color>';
|
|
85
|
+
initial-value: currentcolor;
|
|
86
|
+
inherits: true;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@property --text-shadow-alpha {
|
|
90
|
+
syntax: '<number> | <percentage>';
|
|
91
|
+
initial-value: 1;
|
|
92
|
+
inherits: true;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@property --drop-shadow-x {
|
|
96
|
+
syntax: '<length>';
|
|
97
|
+
initial-value: 0;
|
|
98
|
+
inherits: true;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@property --drop-shadow-y {
|
|
102
|
+
syntax: '<length>';
|
|
103
|
+
initial-value: 0;
|
|
104
|
+
inherits: true;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@property --drop-shadow-color {
|
|
108
|
+
syntax: '<color>';
|
|
109
|
+
initial-value: transparent;
|
|
110
|
+
inherits: true;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@property --drop-shadow-alpha {
|
|
114
|
+
syntax: '<number> | <percentage>';
|
|
115
|
+
initial-value: 1;
|
|
116
|
+
inherits: true;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@utility shadowstring {
|
|
120
|
+
--shadow-string: var(--shadow-inset,) var(--shadow-x, 0) var(--shadow-y, 0)
|
|
121
|
+
var(--shadow-blur, 0) var(--shadow-spread, 0)
|
|
122
|
+
oklch(
|
|
123
|
+
from var(--shadow-color, var(--tw-shadow-color)) l c h /
|
|
124
|
+
var(--shadow-alpha, 1)
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
|
|
18
128
|
@utility shadow {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
129
|
+
@apply shadowstring;
|
|
130
|
+
box-shadow: var(--shadow, var(--shadow-string));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@utility inset {
|
|
134
|
+
--shadow-inset: inset;
|
|
24
135
|
}
|
|
25
136
|
|
|
26
137
|
@utility text-shadow {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
138
|
+
--text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
|
|
139
|
+
var(--text-shadow-blur, 0)
|
|
140
|
+
oklch(
|
|
141
|
+
from var(--text-shadow-color, currentcolor) l c h /
|
|
142
|
+
var(--text-shadow-alpha, 1)
|
|
143
|
+
);
|
|
144
|
+
text-shadow: var(--text-shadow, var(--text-shadow-string));
|
|
32
145
|
}
|
|
33
146
|
|
|
34
147
|
@utility drop-shadow {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
148
|
+
--drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
|
|
149
|
+
var(--drop-shadow-blur, 0)
|
|
150
|
+
oklch(from var(--drop-shadow-color) l c h / var(--drop-shadow-alpha, 1));
|
|
151
|
+
filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@utility shadow-pseudo {
|
|
155
|
+
content: '';
|
|
156
|
+
position: absolute;
|
|
157
|
+
|
|
158
|
+
/* Required if parent element is inline-block. */
|
|
159
|
+
/* Not required if parent element is inline-flex */
|
|
160
|
+
top: calc(var(--border-width, 0px) * -1);
|
|
161
|
+
left: calc(var(--border-width, 0px) * -1);
|
|
162
|
+
z-index: -1;
|
|
163
|
+
box-sizing: content-box;
|
|
164
|
+
width: 100%;
|
|
165
|
+
height: 100%;
|
|
166
|
+
border: inherit;
|
|
167
|
+
border-radius: inherit;
|
|
168
|
+
box-shadow: var(--shadow, var(--shadow-string));
|
|
169
|
+
opacity: 0;
|
|
170
|
+
transition: var(--transition-values);
|
|
171
|
+
transition-property: opacity;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@utility shadow-before {
|
|
175
|
+
@apply shadowstring;
|
|
176
|
+
position: relative;
|
|
177
|
+
|
|
178
|
+
&::before {
|
|
179
|
+
@apply shadow-pseudo;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
@variant interact {
|
|
183
|
+
&::before {
|
|
184
|
+
opacity: 1;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
@utility shadow-after {
|
|
190
|
+
@apply shadowstring;
|
|
191
|
+
position: relative;
|
|
192
|
+
|
|
193
|
+
&::after {
|
|
194
|
+
@apply shadow-pseudo;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@variant interact {
|
|
198
|
+
&::after {
|
|
199
|
+
opacity: 1;
|
|
200
|
+
}
|
|
39
201
|
}
|
|
40
202
|
}
|
|
41
203
|
|
|
42
204
|
/* Shadow Functional Utilities */
|
|
205
|
+
/* prettier-ignore */
|
|
43
206
|
@utility sx-* {
|
|
207
|
+
--shadow-x: --spacing(--value(number));
|
|
208
|
+
--shadow-x: --value([length]);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* prettier-ignore */
|
|
212
|
+
@utility -sx-* {
|
|
213
|
+
--shadow-x: calc(--spacing(--value(number)) * -1);
|
|
44
214
|
--shadow-x: --value([length]);
|
|
45
215
|
}
|
|
46
216
|
|
|
217
|
+
/* prettier-ignore */
|
|
47
218
|
@utility sy-* {
|
|
219
|
+
--shadow-y: --spacing(--value(number));
|
|
220
|
+
--shadow-y: --value([length]);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* prettier-ignore */
|
|
224
|
+
@utility -sy-* {
|
|
225
|
+
--shadow-y: calc(--spacing(--value(number)) * -1);
|
|
48
226
|
--shadow-y: --value([length]);
|
|
49
227
|
}
|
|
50
228
|
|
|
229
|
+
/* prettier-ignore */
|
|
51
230
|
@utility sb-* {
|
|
231
|
+
--shadow-blur: --spacing(--value(number));
|
|
52
232
|
--shadow-blur: --value([length]);
|
|
53
233
|
}
|
|
54
234
|
|
|
55
235
|
/* prettier-ignore */
|
|
56
236
|
@utility sc-* {
|
|
57
237
|
--shadow-color: --value(--color-*, [color]);
|
|
58
|
-
--shadow-color: oklch(from --value(--color-*, [color]) l c h / --modifier(
|
|
238
|
+
--shadow-color: oklch(from --value(--color-*, [color]) l c h / --modifier(number)%);
|
|
59
239
|
}
|
|
60
240
|
|
|
241
|
+
/* prettier-ignore */
|
|
61
242
|
@utility ss-* {
|
|
243
|
+
--shadow-spread: --spacing(--value(number));
|
|
62
244
|
--shadow-spread: --value([length]);
|
|
63
245
|
}
|
|
64
246
|
|
|
247
|
+
/* prettier-ignore */
|
|
248
|
+
@utility -ss-* {
|
|
249
|
+
--shadow-spread: calc(--spacing(--value(number)) * -1);
|
|
250
|
+
--shadow-spread: --value([length]);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* prettier-ignore */
|
|
65
254
|
@utility sa-* {
|
|
66
|
-
--shadow-alpha: --value(
|
|
255
|
+
--shadow-alpha: --value(number)%;
|
|
256
|
+
--shadow-alpha: --value([percentage], [number]);
|
|
67
257
|
}
|
|
68
258
|
|
|
69
259
|
@utility sxm-* {
|
|
@@ -78,29 +268,57 @@
|
|
|
78
268
|
--shadow-blur-multiple: --value([number]);
|
|
79
269
|
}
|
|
80
270
|
|
|
271
|
+
@utility ssm-* {
|
|
272
|
+
--shadow-spread-multiple: --value([number]);
|
|
273
|
+
}
|
|
274
|
+
|
|
81
275
|
/*********************
|
|
82
276
|
* Text Shadow Utilities *
|
|
83
277
|
*********************/
|
|
84
278
|
|
|
279
|
+
/* prettier-ignore */
|
|
85
280
|
@utility tsx-* {
|
|
281
|
+
--text-shadow-x: --spacing(--value(number));
|
|
282
|
+
--text-shadow-x: --value([length]);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* prettier-ignore */
|
|
286
|
+
@utility -tsx-* {
|
|
287
|
+
--text-shadow-x: calc(--spacing(--value(number)) * -1);
|
|
86
288
|
--text-shadow-x: --value([length]);
|
|
87
289
|
}
|
|
88
290
|
|
|
291
|
+
/* prettier-ignore */
|
|
89
292
|
@utility tsy-* {
|
|
293
|
+
--text-shadow-y: --spacing(--value(number));
|
|
90
294
|
--text-shadow-y: --value([length]);
|
|
91
295
|
}
|
|
92
296
|
|
|
297
|
+
/* prettier-ignore */
|
|
298
|
+
@utility -tsy-* {
|
|
299
|
+
--text-shadow-y: calc(--spacing(--value(number)) * -1);
|
|
300
|
+
--text-shadow-y: --value([length]);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* prettier-ignore */
|
|
93
304
|
@utility tsb-* {
|
|
305
|
+
--text-shadow-blur: --spacing(--value(number));
|
|
94
306
|
--text-shadow-blur: --value([length]);
|
|
95
307
|
}
|
|
96
308
|
|
|
97
309
|
@utility tsc-* {
|
|
98
|
-
--text-shadow-color: --value(--color
|
|
310
|
+
--text-shadow-color: --value(--color-*, [color]);
|
|
99
311
|
--text-shadow-color: oklch(
|
|
100
|
-
from --value(--color
|
|
312
|
+
from --value(--color-*, [color]) l c h / --modifier(number) %
|
|
101
313
|
);
|
|
102
314
|
}
|
|
103
315
|
|
|
316
|
+
/* prettier-ignore */
|
|
317
|
+
@utility tsa-* {
|
|
318
|
+
--text-shadow-alpha: --value(number)%;
|
|
319
|
+
--text-shadow-alpha: --value([percentage], [number]);
|
|
320
|
+
}
|
|
321
|
+
|
|
104
322
|
@utility tsxm-* {
|
|
105
323
|
--text-shadow-x-multiple: --value([number]);
|
|
106
324
|
}
|
|
@@ -116,27 +334,48 @@
|
|
|
116
334
|
/*********************
|
|
117
335
|
* Drop Shadow Utilities *
|
|
118
336
|
*********************/
|
|
337
|
+
/* prettier-ignore */
|
|
119
338
|
@utility dsx-* {
|
|
339
|
+
--drop-shadow-x: --spacing(--value(number));
|
|
340
|
+
--drop-shadow-x: --value([length]);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* prettier-ignore */
|
|
344
|
+
@utility -dsx-* {
|
|
345
|
+
--drop-shadow-x: calc(--spacing(--value(number)) * -1);
|
|
120
346
|
--drop-shadow-x: --value([length]);
|
|
121
347
|
}
|
|
122
348
|
|
|
349
|
+
/* prettier-ignore */
|
|
123
350
|
@utility dsy-* {
|
|
351
|
+
--drop-shadow-y: --spacing(--value(number));
|
|
124
352
|
--drop-shadow-y: --value([length]);
|
|
125
353
|
}
|
|
126
354
|
|
|
355
|
+
/* prettier-ignore */
|
|
356
|
+
@utility -dsy-* {
|
|
357
|
+
--drop-shadow-y: calc(--spacing(--value(number)) * -1);
|
|
358
|
+
--drop-shadow-y: --value([length]);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* prettier-ignore */
|
|
127
362
|
@utility dsb-* {
|
|
363
|
+
--drop-shadow-blur: --spacing(--value(number));
|
|
128
364
|
--drop-shadow-blur: --value([length]);
|
|
129
365
|
}
|
|
130
366
|
|
|
367
|
+
/* prettier-ignore */
|
|
131
368
|
@utility dsc-* {
|
|
132
|
-
--drop-shadow-color: --value(--color
|
|
369
|
+
--drop-shadow-color: --value(--color-*, [color]);
|
|
133
370
|
--drop-shadow-color: oklch(
|
|
134
|
-
from --value(--color
|
|
371
|
+
from --value(--color-*, [color]) l c h / --modifier(number) %
|
|
135
372
|
);
|
|
136
373
|
}
|
|
137
374
|
|
|
375
|
+
/* prettier-ignore */
|
|
138
376
|
@utility dsa-* {
|
|
139
|
-
--drop-shadow-alpha: --value(
|
|
377
|
+
--drop-shadow-alpha: --value(number)%;
|
|
378
|
+
--drop-shadow-alpha: --value([percentage], [number]);
|
|
140
379
|
}
|
|
141
380
|
|
|
142
381
|
@utility dsxm-* {
|
|
@@ -150,7 +389,3 @@
|
|
|
150
389
|
@utility dsbm-* {
|
|
151
390
|
--drop-shadow-blur-multiple: --value([number]);
|
|
152
391
|
}
|
|
153
|
-
|
|
154
|
-
@utility dsxm-* {
|
|
155
|
-
--drop-shadow-x-multiple: --value([number]);
|
|
156
|
-
}
|