@luminescent/ui 7.0.2 → 7.2.0-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.
Files changed (3) hide show
  1. package/package.json +18 -9
  2. package/src/formatting.css +27 -17
  3. package/src/index.css +169 -45
package/package.json CHANGED
@@ -1,21 +1,30 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "7.0.2",
3
+ "version": "7.2.0-1",
4
+ "private": false,
4
5
  "description": "Luminescent UI library",
5
- "exports": {
6
- ".": "./src/index.css",
7
- "./formatting": "./src/formatting.css"
6
+ "homepage": "https://ui.luminescent.dev",
7
+ "bugs": {
8
+ "url": "https://github.com/LuminescentDev/ui/issues"
9
+ },
10
+ "license": "AGPL-3.0-or-later",
11
+ "author": {
12
+ "name": "saboooor",
13
+ "url": "https://saboor.ca"
14
+ },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "https://github.com/LuminescentDev/ui.git"
8
18
  },
9
19
  "files": [
10
20
  "src/index.css",
11
21
  "src/formatting.css"
12
22
  ],
13
- "engines": {
14
- "node": ">=23.11.0"
15
- },
16
- "license": "AGPL-3.0-or-later",
17
- "private": false,
18
23
  "type": "module",
24
+ "exports": {
25
+ ".": "./src/index.css",
26
+ "./formatting": "./src/formatting.css"
27
+ },
19
28
  "publishConfig": {
20
29
  "access": "public"
21
30
  },
package/src/formatting.css CHANGED
@@ -2,24 +2,30 @@ a {
2
2
  @apply text-blue-400 no-underline hover:text-blue-500 hover:underline;
3
3
  }
4
4
 
5
- a.lum-btn, a.lum-card {
5
+ a.lum-btn,
6
+ a.lum-card {
6
7
  @apply text-lum-text! hover:no-underline!;
7
8
  }
8
9
 
9
10
  blockquote {
10
- @apply lum-card border-l-6 border-l-blue-400 my-4;
11
+ @apply lum-card my-4 border-l-6 border-l-blue-400;
11
12
  }
12
13
 
13
14
  blockquote p:first-child {
14
- @apply mt-0
15
+ @apply mt-0;
15
16
  }
16
17
 
17
18
  blockquote p:last-child {
18
19
  @apply mb-0;
19
20
  }
20
21
 
21
- h1, h2, h3, h4, h5, h6 {
22
- @apply relative text-lg sm:text-xl font-semibold scroll-mt-36;
22
+ h1,
23
+ h2,
24
+ h3,
25
+ h4,
26
+ h5,
27
+ h6 {
28
+ @apply relative scroll-mt-36 text-lg font-semibold sm:text-xl;
23
29
  }
24
30
 
25
31
  h1,
@@ -33,11 +39,11 @@ h6 {
33
39
  }
34
40
 
35
41
  h1 {
36
- @apply text-4xl sm:text-5xl font-extrabold;
42
+ @apply text-4xl font-extrabold sm:text-5xl;
37
43
  }
38
44
 
39
45
  h2 {
40
- @apply text-3xl sm:text-4xl font-bold;
46
+ @apply text-3xl font-bold sm:text-4xl;
41
47
  }
42
48
 
43
49
  h3 {
@@ -52,8 +58,9 @@ p {
52
58
  @apply text-lum-text-secondary;
53
59
  }
54
60
 
55
- ul, ol {
56
- @apply my-4 ml-10 text-lum-text-secondary list-disc;
61
+ ul,
62
+ ol {
63
+ @apply text-lum-text-secondary my-4 ml-10 list-disc;
57
64
  }
58
65
 
59
66
  ol {
@@ -65,7 +72,7 @@ li {
65
72
  }
66
73
 
67
74
  pre {
68
- @apply overflow-auto p-4 lum-card my-2;
75
+ @apply lum-card my-2 overflow-auto p-4;
69
76
  }
70
77
 
71
78
  pre.shiki {
@@ -73,26 +80,29 @@ pre.shiki {
73
80
  }
74
81
 
75
82
  pre code {
76
- @apply border-none select-auto bg-transparent;
83
+ @apply border-none bg-transparent select-auto;
77
84
  }
78
85
 
79
86
  code {
80
- @apply bg-lum-card-bg py-0.5 px-1 rounded-lum select-all border-b-2 border-b-lum-border/20 break-all sm:break-normal;
87
+ @apply bg-lum-card-bg rounded-lum border-b-lum-border/20 border-b-2 px-1 py-0.5 break-all select-all sm:break-normal;
81
88
  }
82
89
 
83
90
  table {
84
91
  @apply my-5;
85
92
  }
86
93
 
87
- th, td {
94
+ th,
95
+ td {
88
96
  @apply p-2 align-top;
89
97
  }
90
98
 
91
- th:first-child, td:first-child {
99
+ th:first-child,
100
+ td:first-child {
92
101
  @apply pl-0;
93
102
  }
94
103
 
95
- th:last-child, td:last-child {
104
+ th:last-child,
105
+ td:last-child {
96
106
  @apply pr-0;
97
107
  }
98
108
 
@@ -101,5 +111,5 @@ img {
101
111
  }
102
112
 
103
113
  hr {
104
- @apply my-8 border-t-1 border-t-lum-border/20;
105
- }
114
+ @apply border-t-lum-border/20 my-8 border-t-1;
115
+ }
package/src/index.css CHANGED
@@ -14,7 +14,8 @@
14
14
  --lum-input-p-x: 1.5;
15
15
  --lum-label-gap: 0.25rem;
16
16
  --lum-border-radius: var(--radius-lg);
17
- --lum-border-superellipse: 1;
17
+ --lum-border-superellipse: 2;
18
+ --lum-border-superellipse-radius-multiplier: 2;
18
19
  --lum-border-mix: 20%;
19
20
  --lum-depth: 0;
20
21
  --lum-gradient-mix: 20%;
@@ -31,7 +32,11 @@
31
32
 
32
33
  /* Shared utilities to reduce duplication across background utilities */
33
34
  @utility lum-bg-gradient-vars {
34
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
35
+ --gradient-color: color-mix(
36
+ in oklab,
37
+ var(--color-lum-gradient) var(--lum-gradient-mix),
38
+ var(--bg-color)
39
+ );
35
40
  }
36
41
 
37
42
  @utility lum-depth-shadow {
@@ -42,18 +47,25 @@
42
47
  }
43
48
  @utility lum-depth-shadow-fade {
44
49
  box-shadow:
45
- inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) var(--lum-border-color),
46
- 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth)) rgba(0, 0, 0, 0.05),
47
- 0 calc(0.5px * var(--lum-depth)) calc(1.5px * var(--lum-depth)) rgba(0, 0, 0, 0.1);
50
+ inset 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth))
51
+ var(--lum-border-color),
52
+ 0 calc(0.5px * var(--lum-depth)) calc(1px * var(--lum-depth))
53
+ rgba(0, 0, 0, 0.05),
54
+ 0 calc(0.5px * var(--lum-depth)) calc(1.5px * var(--lum-depth))
55
+ rgba(0, 0, 0, 0.1);
48
56
  }
49
57
 
50
58
  @utility lum-focus-border {
51
- &:focus {
52
- border-color: var(--color-lum-accent);
59
+ outline: 1px solid transparent;
60
+ outline-offset: -1px;
61
+
62
+ &:focus-visible {
63
+ outline-color: var(--color-lum-accent);
53
64
  }
54
65
  }
55
66
 
56
67
  @utility lum-border-fade {
68
+ border-width: calc(1px * (1 - clamp(0, var(--lum-depth), 1)));
57
69
  border-color: color-mix(
58
70
  in oklab,
59
71
  var(--lum-border-color),
@@ -64,15 +76,22 @@
64
76
  @utility lum-allow-keywords {
65
77
  background-color: --value('inherit', 'transparent', 'currentColor');
66
78
  border-color: --value('inherit', 'transparent', 'currentColor');
67
- box-shadow: inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor'),
68
- 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor'),
69
- 0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth)) --value('inherit', 'transparent', 'currentColor');
79
+ box-shadow:
80
+ inset 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth))
81
+ --value('inherit', 'transparent', 'currentColor'),
82
+ 0 calc(1px * var(--lum-depth)) calc(2px * var(--lum-depth))
83
+ --value('inherit', 'transparent', 'currentColor'),
84
+ 0 calc(1px * var(--lum-depth)) calc(3px * var(--lum-depth))
85
+ --value('inherit', 'transparent', 'currentColor');
70
86
  }
71
87
 
72
-
73
88
  @utility lum-bg {
74
89
  /* Inlined base color logic (previously in lum-bg-base) */
75
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
90
+ --lum-border-color: color-mix(
91
+ in oklab,
92
+ var(--color-lum-border) var(--lum-border-mix),
93
+ var(--bg-color)
94
+ );
76
95
  --lum-surface-color: var(--bg-color);
77
96
 
78
97
  @apply border border-transparent outline-none;
@@ -88,7 +107,11 @@
88
107
  --alpha: --modifier(integer);
89
108
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
90
109
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
91
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
110
+ --lum-border-color: color-mix(
111
+ in oklab,
112
+ var(--color-lum-border) var(--lum-border-mix),
113
+ var(--bg-color)
114
+ );
92
115
  --lum-surface-color: var(--bg-color);
93
116
 
94
117
  @apply border border-transparent outline-none;
@@ -105,8 +128,16 @@
105
128
  --alpha: --modifier(integer);
106
129
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
107
130
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
108
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
109
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
131
+ --lum-border-color: color-mix(
132
+ in oklab,
133
+ var(--color-lum-border) var(--lum-border-mix),
134
+ var(--bg-color)
135
+ );
136
+ --gradient-color: color-mix(
137
+ in oklab,
138
+ var(--color-lum-gradient) var(--lum-gradient-mix),
139
+ var(--bg-color)
140
+ );
110
141
  --lum-surface-color: var(--gradient-color);
111
142
 
112
143
  @apply border border-transparent outline-none;
@@ -114,7 +145,11 @@
114
145
  @apply lum-border-fade;
115
146
  @apply lum-depth-shadow-fade;
116
147
 
117
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
148
+ background: linear-gradient(
149
+ var(--lum-gradient-angle),
150
+ var(--bg-color),
151
+ var(--gradient-color)
152
+ );
118
153
  @apply lum-allow-keywords;
119
154
  }
120
155
 
@@ -123,7 +158,11 @@
123
158
  --alpha: --modifier(integer);
124
159
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
125
160
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
126
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
161
+ --lum-border-color: color-mix(
162
+ in oklab,
163
+ var(--color-lum-border) var(--lum-border-mix),
164
+ var(--bg-color)
165
+ );
127
166
  --lum-surface-color: var(--bg-color);
128
167
 
129
168
  @apply border border-transparent outline-none;
@@ -140,15 +179,27 @@
140
179
  --alpha: --modifier(integer);
141
180
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
142
181
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
143
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
144
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
182
+ --lum-border-color: color-mix(
183
+ in oklab,
184
+ var(--color-lum-border) var(--lum-border-mix),
185
+ var(--bg-color)
186
+ );
187
+ --gradient-color: color-mix(
188
+ in oklab,
189
+ var(--color-lum-gradient) var(--lum-gradient-mix),
190
+ var(--bg-color)
191
+ );
145
192
  --lum-surface-color: var(--gradient-color);
146
193
 
147
194
  @apply border border-transparent outline-none;
148
195
  @apply lum-focus-border;
149
196
 
150
197
  border-color: var(--lum-border-color);
151
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
198
+ background: linear-gradient(
199
+ var(--lum-gradient-angle),
200
+ var(--bg-color),
201
+ var(--gradient-color)
202
+ );
152
203
 
153
204
  @apply lum-allow-keywords;
154
205
  }
@@ -158,7 +209,11 @@
158
209
  --alpha: --modifier(integer);
159
210
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
160
211
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
161
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
212
+ --lum-border-color: color-mix(
213
+ in oklab,
214
+ var(--color-lum-border) var(--lum-border-mix),
215
+ var(--bg-color)
216
+ );
162
217
  --lum-surface-color: var(--bg-color);
163
218
 
164
219
  @apply lum-depth-shadow;
@@ -173,13 +228,25 @@
173
228
  --alpha: --modifier(integer);
174
229
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
175
230
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
176
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
177
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
231
+ --lum-border-color: color-mix(
232
+ in oklab,
233
+ var(--color-lum-border) var(--lum-border-mix),
234
+ var(--bg-color)
235
+ );
236
+ --gradient-color: color-mix(
237
+ in oklab,
238
+ var(--color-lum-gradient) var(--lum-gradient-mix),
239
+ var(--bg-color)
240
+ );
178
241
  --lum-surface-color: var(--gradient-color);
179
242
 
180
243
  @apply lum-depth-shadow;
181
244
 
182
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
245
+ background: linear-gradient(
246
+ var(--lum-gradient-angle),
247
+ var(--bg-color),
248
+ var(--gradient-color)
249
+ );
183
250
 
184
251
  @apply lum-allow-keywords;
185
252
  }
@@ -189,8 +256,16 @@
189
256
  --alpha: --modifier(integer);
190
257
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
191
258
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
192
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
193
- --gradient-color: color-mix(in oklab, var(--color-lum-gradient) var(--lum-gradient-mix), var(--bg-color));
259
+ --lum-border-color: color-mix(
260
+ in oklab,
261
+ var(--color-lum-border) var(--lum-border-mix),
262
+ var(--bg-color)
263
+ );
264
+ --gradient-color: color-mix(
265
+ in oklab,
266
+ var(--color-lum-gradient) var(--lum-gradient-mix),
267
+ var(--bg-color)
268
+ );
194
269
  --lum-surface-color: var(--gradient-color);
195
270
 
196
271
  @apply border border-transparent outline-none;
@@ -198,7 +273,11 @@
198
273
  @apply lum-border-fade;
199
274
  @apply lum-depth-shadow-fade;
200
275
 
201
- background: linear-gradient(var(--lum-gradient-angle), var(--bg-color), var(--gradient-color));
276
+ background: linear-gradient(
277
+ var(--lum-gradient-angle),
278
+ var(--bg-color),
279
+ var(--gradient-color)
280
+ );
202
281
  }
203
282
 
204
283
  @utility lum-toggle-bg-* {
@@ -206,9 +285,16 @@
206
285
  --alpha: --modifier(integer);
207
286
  --bg-color: --alpha(--value([color]) / calc(var(--alpha, 100) * 1%));
208
287
  --bg-color: --alpha(--value(--color-*) / calc(var(--alpha, 100) * 1%));
209
- --lum-border-color: color-mix(in oklab, var(--color-lum-border) var(--lum-border-mix), var(--bg-color));
288
+ --lum-border-color: color-mix(
289
+ in oklab,
290
+ var(--color-lum-border) var(--lum-border-mix),
291
+ var(--bg-color)
292
+ );
210
293
  --lum-surface-color: var(--bg-color);
211
- --lum-toggle-hover-bg: --alpha(color-mix(in oklab, white 10%, --value(--color-*)) / calc(var(--alpha, 100) * 1%));
294
+ --lum-toggle-hover-bg: --alpha(
295
+ color-mix(in oklab, white 25%, --value(--color-*)) /
296
+ calc(var(--alpha, 100) * 1%)
297
+ );
212
298
 
213
299
  @apply border border-transparent outline-none;
214
300
  @apply lum-focus-border;
@@ -217,7 +303,8 @@
217
303
  background-color: var(--bg-color);
218
304
  @apply lum-allow-keywords;
219
305
 
220
- &::after, &:hover {
306
+ &::after,
307
+ &:hover {
221
308
  --lum-surface-color: var(--lum-toggle-hover-bg);
222
309
  background-color: var(--lum-toggle-hover-bg);
223
310
  @apply lum-border-fade;
@@ -226,15 +313,33 @@
226
313
  }
227
314
  }
228
315
 
229
-
230
316
  @utility rounded-lum {
231
317
  border-radius: var(--lum-border-radius);
232
- corner-shape: superellipse(var(--lum-border-superellipse));
318
+ @supports (corner-shape: squircle) {
319
+ corner-shape: superellipse(var(--lum-border-superellipse));
320
+ border-radius: calc(
321
+ var(--lum-border-radius) *
322
+ var(--lum-border-superellipse-radius-multiplier)
323
+ );
324
+ }
233
325
  }
234
326
 
235
327
  @utility rounded-lum-* {
236
- border-radius: calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)));
237
- corner-shape: superellipse(var(--lum-border-superellipse));
328
+ border-radius: max(
329
+ 0px,
330
+ calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)))
331
+ );
332
+ @supports (corner-shape: squircle) {
333
+ corner-shape: superellipse(var(--lum-border-superellipse));
334
+ border-radius: max(
335
+ 0px,
336
+ calc(
337
+ var(--lum-border-radius) *
338
+ var(--lum-border-superellipse-radius-multiplier) -
339
+ calc(var(--spacing) * --value(number))
340
+ )
341
+ );
342
+ }
238
343
  }
239
344
 
240
345
  @utility border-gradient-* {
@@ -242,17 +347,18 @@
242
347
  border-width: calc(--value(integer) * 1px);
243
348
  border-color: transparent !important;
244
349
  &::before {
245
- @apply bg-gradient-to-br content-[''] absolute inset-0 z-[-1];
350
+ @apply absolute inset-0 z-[-1] bg-gradient-to-br content-[''];
246
351
  margin: calc(--value(integer) * -1px);
247
352
  border-radius: inherit;
353
+ corner-shape: inherit;
248
354
  }
249
355
  }
250
356
 
251
357
  @utility lum-btn-p-* {
252
358
  padding: calc(var(--spacing) * --value(integer))
253
- calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x))
254
- calc(var(--spacing) * --value(integer))
255
- calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x));
359
+ calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x))
360
+ calc(var(--spacing) * --value(integer))
361
+ calc(var(--spacing) * --value(integer) * var(--lum-btn-p-x));
256
362
 
257
363
  gap: calc(
258
364
  var(--spacing) * --value(integer) * clamp(0.65, 4 / --value(integer), 1)
@@ -267,19 +373,37 @@
267
373
  }
268
374
 
269
375
  @utility lum-input {
270
- @apply flex motion-safe:transition duration-300 hover:duration-75 active:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg active:drop-shadow-lg whitespace-nowrap touch-manipulation select-none lum-input-p-2 lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg;
376
+ @apply lum-input-p-2 lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg flex touch-manipulation whitespace-nowrap duration-300 ease-out select-none hover:drop-shadow-lg hover:duration-75 active:drop-shadow-lg active:duration-75 disabled:opacity-50 motion-safe:transition;
271
377
  border-radius: var(--lum-border-radius);
272
- corner-shape: superellipse(var(--lum-border-superellipse));
378
+ @supports (corner-shape: squircle) {
379
+ corner-shape: superellipse(var(--lum-border-superellipse));
380
+ border-radius: calc(
381
+ var(--lum-border-radius) *
382
+ var(--lum-border-superellipse-radius-multiplier)
383
+ );
384
+ }
273
385
  }
274
386
 
275
387
  @utility lum-btn {
276
- @apply flex items-center motion-safe:transition duration-300 hover:duration-75 active:duration-75 ease-out disabled:opacity-50 hover:drop-shadow-lg active:drop-shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none lum-btn-p-2 text-base lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg;
388
+ @apply lum-btn-p-2 lum-bg-lum-input-bg hover:lum-bg-lum-input-hover-bg active:lum-bg-lum-input-hover-bg flex touch-manipulation items-center text-base whitespace-nowrap duration-300 ease-out select-none hover:drop-shadow-lg hover:duration-75 active:drop-shadow-lg active:duration-75 disabled:opacity-50 motion-safe:transition motion-safe:active:scale-95;
277
389
  border-radius: var(--lum-border-radius);
278
- corner-shape: superellipse(var(--lum-border-superellipse));
390
+ @supports (corner-shape: squircle) {
391
+ corner-shape: superellipse(var(--lum-border-superellipse));
392
+ border-radius: calc(
393
+ var(--lum-border-radius) *
394
+ var(--lum-border-superellipse-radius-multiplier)
395
+ );
396
+ }
279
397
  }
280
398
 
281
399
  @utility lum-card {
282
- @apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-lum-card-bg p-7;
400
+ @apply lum-bg-lum-card-bg flex flex-col gap-3 p-7 whitespace-pre-wrap;
283
401
  border-radius: var(--lum-border-radius);
284
- corner-shape: superellipse(var(--lum-border-superellipse));
285
- }
402
+ @supports (corner-shape: squircle) {
403
+ corner-shape: superellipse(var(--lum-border-superellipse));
404
+ border-radius: calc(
405
+ var(--lum-border-radius) *
406
+ var(--lum-border-superellipse-radius-multiplier)
407
+ );
408
+ }
409
+ }