@luminescent/ui 7.1.0 → 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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/index.css +42 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "7.1.0",
3
+ "version": "7.2.0-1",
4
4
  "private": false,
5
5
  "description": "Luminescent UI library",
6
6
  "homepage": "https://ui.luminescent.dev",
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%;
@@ -314,7 +315,13 @@
314
315
 
315
316
  @utility rounded-lum {
316
317
  border-radius: var(--lum-border-radius);
317
- 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
+ }
318
325
  }
319
326
 
320
327
  @utility rounded-lum-* {
@@ -322,7 +329,17 @@
322
329
  0px,
323
330
  calc(var(--lum-border-radius) - calc(var(--spacing) * --value(number)))
324
331
  );
325
- corner-shape: superellipse(var(--lum-border-superellipse));
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
+ }
326
343
  }
327
344
 
328
345
  @utility border-gradient-* {
@@ -333,6 +350,7 @@
333
350
  @apply absolute inset-0 z-[-1] bg-gradient-to-br content-[''];
334
351
  margin: calc(--value(integer) * -1px);
335
352
  border-radius: inherit;
353
+ corner-shape: inherit;
336
354
  }
337
355
  }
338
356
 
@@ -357,17 +375,35 @@
357
375
  @utility lum-input {
358
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;
359
377
  border-radius: var(--lum-border-radius);
360
- 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
+ }
361
385
  }
362
386
 
363
387
  @utility lum-btn {
364
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;
365
389
  border-radius: var(--lum-border-radius);
366
- 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
+ }
367
397
  }
368
398
 
369
399
  @utility lum-card {
370
400
  @apply lum-bg-lum-card-bg flex flex-col gap-3 p-7 whitespace-pre-wrap;
371
401
  border-radius: var(--lum-border-radius);
372
- corner-shape: superellipse(var(--lum-border-superellipse));
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
+ }
373
409
  }