@tempots/beatui 0.88.0 → 0.90.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.
package/dist/beatui.css CHANGED
@@ -333,49 +333,12 @@ ol {
333
333
  --spacing-none: 0;
334
334
  --spacing-px: 1px;
335
335
  --spacing-base: 0.25rem;
336
- --spacing-xs: calc(var(--spacing-base) / 2);
337
- --spacing-sm: var(--spacing-base);
338
- --spacing-smh: calc(var(--spacing-base) * 1.5);
339
- --spacing-md: calc(var(--spacing-base) * 2);
340
- --spacing-mdh: calc(var(--spacing-base) * 3);
341
- --spacing-lg: calc(var(--spacing-base) * 4);
342
- --spacing-lgh: calc(var(--spacing-base) * 5);
343
- --spacing-xl: calc(var(--spacing-base) * 6);
344
- --spacing-2xl: calc(var(--spacing-base) * 8);
345
- --spacing-2xlh: calc(var(--spacing-base) * 10);
346
- --spacing-3xl: calc(var(--spacing-base) * 12);
347
- --spacing-4xl: calc(var(--spacing-base) * 16);
348
336
  --spacing-full: 2000px;
349
337
  --font-size-base: 1rem;
350
- --font-size-3xs: calc(var(--font-size-base) * 0.5);
351
- --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
352
- --font-size-2xs: calc(var(--font-size-base) * 0.625);
353
- --font-size-2xs-lh: calc(var(--font-size-base) * 0.75);
354
- --font-size-xs: calc(var(--font-size-base) * 0.75);
355
- --font-size-xs-lh: var(--font-size-base);
356
- --font-size-sm: calc(var(--font-size-base) * 0.875);
357
- --font-size-sm-lh: calc(var(--font-size-base) * 1.25);
358
- --font-size-md: var(--font-size-base);
359
- --font-size-md-lh: calc(var(--font-size-base) * 1.5);
360
- --font-size-lg: calc(var(--font-size-base) * 1.125);
361
- --font-size-lg-lh: calc(var(--font-size-base) * 1.75);
362
- --font-size-xl: calc(var(--font-size-base) * 1.25);
363
- --font-size-xl-lh: calc(var(--font-size-base) * 1.75);
364
- --font-size-2xl: calc(var(--font-size-base) * 1.5);
365
- --font-size-2xl-lh: calc(var(--font-size-base) * 2);
366
- --font-size-3xl: calc(var(--font-size-base) * 1.875);
367
- --font-size-3xl-lh: calc(var(--font-size-base) * 2.25);
368
- --font-size-4xl: calc(var(--font-size-base) * 2.25);
369
- --font-size-4xl-lh: calc(var(--font-size-base) * 2.5);
370
- --font-size-5xl: calc(var(--font-size-base) * 3);
371
338
  --font-size-5xl-lh: 1;
372
- --font-size-6xl: calc(var(--font-size-base) * 3.75);
373
339
  --font-size-6xl-lh: 1;
374
- --font-size-7xl: calc(var(--font-size-base) * 4.5);
375
340
  --font-size-7xl-lh: 1;
376
- --font-size-8xl: calc(var(--font-size-base) * 6);
377
341
  --font-size-8xl-lh: 1;
378
- --font-size-9xl: calc(var(--font-size-base) * 8);
379
342
  --font-size-9xl-lh: 1;
380
343
  --font-weight-thin: 100;
381
344
  --font-weight-extralight: 200;
@@ -410,11 +373,6 @@ ol {
410
373
  --breakpoint-xl: 80rem;
411
374
  --breakpoint-2xl: 96rem;
412
375
  --radius-none: 0;
413
- --radius-xs: var(--spacing-xs);
414
- --radius-sm: var(--spacing-sm);
415
- --radius-md: var(--spacing-smh);
416
- --radius-lg: var(--spacing-md);
417
- --radius-xl: var(--spacing-mdh);
418
376
  --radius-full: 9999px;
419
377
  --shadow-none: none;
420
378
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
@@ -432,10 +390,7 @@ ol {
432
390
  --shadow-top-xl: 0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
433
391
  --shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
434
392
  --motion-duration-instant: 0s;
435
- --motion-duration-fast: calc(var(--motion-duration-base) * 0.6);
436
393
  --motion-duration-base: 200ms;
437
- --motion-duration-slow: calc(var(--motion-duration-base) * 1.6);
438
- --motion-duration-relaxed: calc(var(--motion-duration-base) * 2.4);
439
394
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
440
395
  --motion-easing-emphasized: cubic-bezier(0.33, 1, 0.68, 1);
441
396
  --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
@@ -464,6 +419,60 @@ ol {
464
419
  --outline-width-none: 0;
465
420
  --outline-width-default: 1px;
466
421
  --outline-width-focus: 2px;
422
+ --overlay-width-xs: min(20rem, 90vw);
423
+ --overlay-width-sm: min(25rem, 90vw);
424
+ --overlay-width-md: min(37.5rem, 90vw);
425
+ --overlay-width-lg: min(50rem, 90vw);
426
+ --overlay-width-xl: min(62.5rem, 90vw);
427
+ --overlay-width-min-width: 12rem;
428
+ }
429
+
430
+ *, ::before, ::after {
431
+ --spacing-xs: calc(var(--spacing-base) / 2);
432
+ --spacing-sm: var(--spacing-base);
433
+ --spacing-smh: calc(var(--spacing-base) * 1.5);
434
+ --spacing-md: calc(var(--spacing-base) * 2);
435
+ --spacing-mdh: calc(var(--spacing-base) * 3);
436
+ --spacing-lg: calc(var(--spacing-base) * 4);
437
+ --spacing-lgh: calc(var(--spacing-base) * 5);
438
+ --spacing-xl: calc(var(--spacing-base) * 6);
439
+ --spacing-2xl: calc(var(--spacing-base) * 8);
440
+ --spacing-2xlh: calc(var(--spacing-base) * 10);
441
+ --spacing-3xl: calc(var(--spacing-base) * 12);
442
+ --spacing-4xl: calc(var(--spacing-base) * 16);
443
+ --font-size-3xs: calc(var(--font-size-base) * 0.5);
444
+ --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
445
+ --font-size-2xs: calc(var(--font-size-base) * 0.625);
446
+ --font-size-2xs-lh: calc(var(--font-size-base) * 0.75);
447
+ --font-size-xs: calc(var(--font-size-base) * 0.75);
448
+ --font-size-xs-lh: var(--font-size-base);
449
+ --font-size-sm: calc(var(--font-size-base) * 0.875);
450
+ --font-size-sm-lh: calc(var(--font-size-base) * 1.25);
451
+ --font-size-md: var(--font-size-base);
452
+ --font-size-md-lh: calc(var(--font-size-base) * 1.5);
453
+ --font-size-lg: calc(var(--font-size-base) * 1.125);
454
+ --font-size-lg-lh: calc(var(--font-size-base) * 1.75);
455
+ --font-size-xl: calc(var(--font-size-base) * 1.25);
456
+ --font-size-xl-lh: calc(var(--font-size-base) * 1.75);
457
+ --font-size-2xl: calc(var(--font-size-base) * 1.5);
458
+ --font-size-2xl-lh: calc(var(--font-size-base) * 2);
459
+ --font-size-3xl: calc(var(--font-size-base) * 1.875);
460
+ --font-size-3xl-lh: calc(var(--font-size-base) * 2.25);
461
+ --font-size-4xl: calc(var(--font-size-base) * 2.25);
462
+ --font-size-4xl-lh: calc(var(--font-size-base) * 2.5);
463
+ --font-size-5xl: calc(var(--font-size-base) * 3);
464
+ --font-size-6xl: calc(var(--font-size-base) * 3.75);
465
+ --font-size-7xl: calc(var(--font-size-base) * 4.5);
466
+ --font-size-8xl: calc(var(--font-size-base) * 6);
467
+ --font-size-9xl: calc(var(--font-size-base) * 8);
468
+ --radius-xs: var(--spacing-xs);
469
+ --radius-sm: var(--spacing-sm);
470
+ --radius-md: var(--spacing-smh);
471
+ --radius-lg: var(--spacing-md);
472
+ --radius-xl: var(--spacing-mdh);
473
+ --motion-duration-fast: calc(var(--motion-duration-base) * 0.6);
474
+ --motion-duration-slow: calc(var(--motion-duration-base) * 1.6);
475
+ --motion-duration-relaxed: calc(var(--motion-duration-base) * 2.4);
467
476
  --control-height-xs: calc(var(--spacing-base) * 7);
468
477
  --control-height-sm: calc(var(--spacing-base) * 8);
469
478
  --control-height-md: calc(var(--spacing-base) * 10);
@@ -484,15 +493,12 @@ ol {
484
493
  --control-gap-md: var(--spacing-smh);
485
494
  --control-gap-lg: var(--spacing-md);
486
495
  --control-gap-xl: var(--spacing-mdh);
487
- --overlay-width-xs: min(20rem, 90vw);
488
- --overlay-width-sm: min(25rem, 90vw);
489
- --overlay-width-md: min(37.5rem, 90vw);
490
- --overlay-width-lg: min(50rem, 90vw);
491
- --overlay-width-xl: min(62.5rem, 90vw);
492
- --overlay-width-min-width: 12rem;
493
496
  }
494
497
 
495
498
  :root {
499
+ }
500
+
501
+ *, ::before, ::after {
496
502
  --color-primary-50: var(--color-blue-50);
497
503
  --color-primary-100: var(--color-blue-100);
498
504
  --color-primary-200: var(--color-blue-200);
@@ -3771,23 +3777,28 @@ a:focus-visible {
3771
3777
  }
3772
3778
 
3773
3779
  .bc-control--padding-xs {
3774
- padding: var(--control-padding-block-xs) var(--control-padding-inline-xs);
3780
+ padding-block: var(--control-padding-block-xs);
3781
+ padding-inline: var(--control-padding-inline-xs);
3775
3782
  }
3776
3783
 
3777
3784
  .bc-control--padding-sm {
3778
- padding: var(--control-padding-block-sm) var(--control-padding-inline-sm);
3785
+ padding-block: var(--control-padding-block-sm);
3786
+ padding-inline: var(--control-padding-inline-sm);
3779
3787
  }
3780
3788
 
3781
3789
  .bc-control--padding-md {
3782
- padding: var(--control-padding-block-md) var(--control-padding-inline-md);
3790
+ padding-block: var(--control-padding-block-md);
3791
+ padding-inline: var(--control-padding-inline-md);
3783
3792
  }
3784
3793
 
3785
3794
  .bc-control--padding-lg {
3786
- padding: var(--control-padding-block-lg) var(--control-padding-inline-lg);
3795
+ padding-block: var(--control-padding-block-lg);
3796
+ padding-inline: var(--control-padding-inline-lg);
3787
3797
  }
3788
3798
 
3789
3799
  .bc-control--padding-xl {
3790
- padding: var(--control-padding-block-xl) var(--control-padding-inline-xl);
3800
+ padding-block: var(--control-padding-block-xl);
3801
+ padding-inline: var(--control-padding-inline-xl);
3791
3802
  }
3792
3803
 
3793
3804
  .bc-control--padding-xs:has(> .bc-icon:only-child) {
@@ -252,49 +252,12 @@
252
252
  --spacing-none: 0;
253
253
  --spacing-px: 1px;
254
254
  --spacing-base: 0.25rem;
255
- --spacing-xs: calc(var(--spacing-base) / 2);
256
- --spacing-sm: var(--spacing-base);
257
- --spacing-smh: calc(var(--spacing-base) * 1.5);
258
- --spacing-md: calc(var(--spacing-base) * 2);
259
- --spacing-mdh: calc(var(--spacing-base) * 3);
260
- --spacing-lg: calc(var(--spacing-base) * 4);
261
- --spacing-lgh: calc(var(--spacing-base) * 5);
262
- --spacing-xl: calc(var(--spacing-base) * 6);
263
- --spacing-2xl: calc(var(--spacing-base) * 8);
264
- --spacing-2xlh: calc(var(--spacing-base) * 10);
265
- --spacing-3xl: calc(var(--spacing-base) * 12);
266
- --spacing-4xl: calc(var(--spacing-base) * 16);
267
255
  --spacing-full: 2000px;
268
256
  --font-size-base: 1rem;
269
- --font-size-3xs: calc(var(--font-size-base) * 0.5);
270
- --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
271
- --font-size-2xs: calc(var(--font-size-base) * 0.625);
272
- --font-size-2xs-lh: calc(var(--font-size-base) * 0.75);
273
- --font-size-xs: calc(var(--font-size-base) * 0.75);
274
- --font-size-xs-lh: var(--font-size-base);
275
- --font-size-sm: calc(var(--font-size-base) * 0.875);
276
- --font-size-sm-lh: calc(var(--font-size-base) * 1.25);
277
- --font-size-md: var(--font-size-base);
278
- --font-size-md-lh: calc(var(--font-size-base) * 1.5);
279
- --font-size-lg: calc(var(--font-size-base) * 1.125);
280
- --font-size-lg-lh: calc(var(--font-size-base) * 1.75);
281
- --font-size-xl: calc(var(--font-size-base) * 1.25);
282
- --font-size-xl-lh: calc(var(--font-size-base) * 1.75);
283
- --font-size-2xl: calc(var(--font-size-base) * 1.5);
284
- --font-size-2xl-lh: calc(var(--font-size-base) * 2);
285
- --font-size-3xl: calc(var(--font-size-base) * 1.875);
286
- --font-size-3xl-lh: calc(var(--font-size-base) * 2.25);
287
- --font-size-4xl: calc(var(--font-size-base) * 2.25);
288
- --font-size-4xl-lh: calc(var(--font-size-base) * 2.5);
289
- --font-size-5xl: calc(var(--font-size-base) * 3);
290
257
  --font-size-5xl-lh: 1;
291
- --font-size-6xl: calc(var(--font-size-base) * 3.75);
292
258
  --font-size-6xl-lh: 1;
293
- --font-size-7xl: calc(var(--font-size-base) * 4.5);
294
259
  --font-size-7xl-lh: 1;
295
- --font-size-8xl: calc(var(--font-size-base) * 6);
296
260
  --font-size-8xl-lh: 1;
297
- --font-size-9xl: calc(var(--font-size-base) * 8);
298
261
  --font-size-9xl-lh: 1;
299
262
  --font-weight-thin: 100;
300
263
  --font-weight-extralight: 200;
@@ -329,11 +292,6 @@
329
292
  --breakpoint-xl: 80rem;
330
293
  --breakpoint-2xl: 96rem;
331
294
  --radius-none: 0;
332
- --radius-xs: var(--spacing-xs);
333
- --radius-sm: var(--spacing-sm);
334
- --radius-md: var(--spacing-smh);
335
- --radius-lg: var(--spacing-md);
336
- --radius-xl: var(--spacing-mdh);
337
295
  --radius-full: 9999px;
338
296
  --shadow-none: none;
339
297
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
@@ -351,10 +309,7 @@
351
309
  --shadow-top-xl: 0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
352
310
  --shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
353
311
  --motion-duration-instant: 0s;
354
- --motion-duration-fast: calc(var(--motion-duration-base) * 0.6);
355
312
  --motion-duration-base: 200ms;
356
- --motion-duration-slow: calc(var(--motion-duration-base) * 1.6);
357
- --motion-duration-relaxed: calc(var(--motion-duration-base) * 2.4);
358
313
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
359
314
  --motion-easing-emphasized: cubic-bezier(0.33, 1, 0.68, 1);
360
315
  --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
@@ -383,6 +338,60 @@
383
338
  --outline-width-none: 0;
384
339
  --outline-width-default: 1px;
385
340
  --outline-width-focus: 2px;
341
+ --overlay-width-xs: min(20rem, 90vw);
342
+ --overlay-width-sm: min(25rem, 90vw);
343
+ --overlay-width-md: min(37.5rem, 90vw);
344
+ --overlay-width-lg: min(50rem, 90vw);
345
+ --overlay-width-xl: min(62.5rem, 90vw);
346
+ --overlay-width-min-width: 12rem;
347
+ }
348
+
349
+ *, ::before, ::after {
350
+ --spacing-xs: calc(var(--spacing-base) / 2);
351
+ --spacing-sm: var(--spacing-base);
352
+ --spacing-smh: calc(var(--spacing-base) * 1.5);
353
+ --spacing-md: calc(var(--spacing-base) * 2);
354
+ --spacing-mdh: calc(var(--spacing-base) * 3);
355
+ --spacing-lg: calc(var(--spacing-base) * 4);
356
+ --spacing-lgh: calc(var(--spacing-base) * 5);
357
+ --spacing-xl: calc(var(--spacing-base) * 6);
358
+ --spacing-2xl: calc(var(--spacing-base) * 8);
359
+ --spacing-2xlh: calc(var(--spacing-base) * 10);
360
+ --spacing-3xl: calc(var(--spacing-base) * 12);
361
+ --spacing-4xl: calc(var(--spacing-base) * 16);
362
+ --font-size-3xs: calc(var(--font-size-base) * 0.5);
363
+ --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
364
+ --font-size-2xs: calc(var(--font-size-base) * 0.625);
365
+ --font-size-2xs-lh: calc(var(--font-size-base) * 0.75);
366
+ --font-size-xs: calc(var(--font-size-base) * 0.75);
367
+ --font-size-xs-lh: var(--font-size-base);
368
+ --font-size-sm: calc(var(--font-size-base) * 0.875);
369
+ --font-size-sm-lh: calc(var(--font-size-base) * 1.25);
370
+ --font-size-md: var(--font-size-base);
371
+ --font-size-md-lh: calc(var(--font-size-base) * 1.5);
372
+ --font-size-lg: calc(var(--font-size-base) * 1.125);
373
+ --font-size-lg-lh: calc(var(--font-size-base) * 1.75);
374
+ --font-size-xl: calc(var(--font-size-base) * 1.25);
375
+ --font-size-xl-lh: calc(var(--font-size-base) * 1.75);
376
+ --font-size-2xl: calc(var(--font-size-base) * 1.5);
377
+ --font-size-2xl-lh: calc(var(--font-size-base) * 2);
378
+ --font-size-3xl: calc(var(--font-size-base) * 1.875);
379
+ --font-size-3xl-lh: calc(var(--font-size-base) * 2.25);
380
+ --font-size-4xl: calc(var(--font-size-base) * 2.25);
381
+ --font-size-4xl-lh: calc(var(--font-size-base) * 2.5);
382
+ --font-size-5xl: calc(var(--font-size-base) * 3);
383
+ --font-size-6xl: calc(var(--font-size-base) * 3.75);
384
+ --font-size-7xl: calc(var(--font-size-base) * 4.5);
385
+ --font-size-8xl: calc(var(--font-size-base) * 6);
386
+ --font-size-9xl: calc(var(--font-size-base) * 8);
387
+ --radius-xs: var(--spacing-xs);
388
+ --radius-sm: var(--spacing-sm);
389
+ --radius-md: var(--spacing-smh);
390
+ --radius-lg: var(--spacing-md);
391
+ --radius-xl: var(--spacing-mdh);
392
+ --motion-duration-fast: calc(var(--motion-duration-base) * 0.6);
393
+ --motion-duration-slow: calc(var(--motion-duration-base) * 1.6);
394
+ --motion-duration-relaxed: calc(var(--motion-duration-base) * 2.4);
386
395
  --control-height-xs: calc(var(--spacing-base) * 7);
387
396
  --control-height-sm: calc(var(--spacing-base) * 8);
388
397
  --control-height-md: calc(var(--spacing-base) * 10);
@@ -403,17 +412,14 @@
403
412
  --control-gap-md: var(--spacing-smh);
404
413
  --control-gap-lg: var(--spacing-md);
405
414
  --control-gap-xl: var(--spacing-mdh);
406
- --overlay-width-xs: min(20rem, 90vw);
407
- --overlay-width-sm: min(25rem, 90vw);
408
- --overlay-width-md: min(37.5rem, 90vw);
409
- --overlay-width-lg: min(50rem, 90vw);
410
- --overlay-width-xl: min(62.5rem, 90vw);
411
- --overlay-width-min-width: 12rem;
412
415
  }
413
416
 
414
417
  }
415
418
  @layer base {
416
419
  :root {
420
+ }
421
+
422
+ *, ::before, ::after {
417
423
  --color-primary-50: var(--color-blue-50);
418
424
  --color-primary-100: var(--color-blue-100);
419
425
  --color-primary-200: var(--color-blue-200);
@@ -3437,23 +3443,28 @@ a:focus-visible {
3437
3443
  }
3438
3444
 
3439
3445
  .bc-control--padding-xs {
3440
- padding: var(--control-padding-block-xs) var(--control-padding-inline-xs);
3446
+ padding-block: var(--control-padding-block-xs);
3447
+ padding-inline: var(--control-padding-inline-xs);
3441
3448
  }
3442
3449
 
3443
3450
  .bc-control--padding-sm {
3444
- padding: var(--control-padding-block-sm) var(--control-padding-inline-sm);
3451
+ padding-block: var(--control-padding-block-sm);
3452
+ padding-inline: var(--control-padding-inline-sm);
3445
3453
  }
3446
3454
 
3447
3455
  .bc-control--padding-md {
3448
- padding: var(--control-padding-block-md) var(--control-padding-inline-md);
3456
+ padding-block: var(--control-padding-block-md);
3457
+ padding-inline: var(--control-padding-inline-md);
3449
3458
  }
3450
3459
 
3451
3460
  .bc-control--padding-lg {
3452
- padding: var(--control-padding-block-lg) var(--control-padding-inline-lg);
3461
+ padding-block: var(--control-padding-block-lg);
3462
+ padding-inline: var(--control-padding-inline-lg);
3453
3463
  }
3454
3464
 
3455
3465
  .bc-control--padding-xl {
3456
- padding: var(--control-padding-block-xl) var(--control-padding-inline-xl);
3466
+ padding-block: var(--control-padding-block-xl);
3467
+ padding-inline: var(--control-padding-inline-xl);
3457
3468
  }
3458
3469
 
3459
3470
  .bc-control--padding-xs:has(> .bc-icon:only-child) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tempots/beatui",
3
- "version": "0.88.0",
3
+ "version": "0.90.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.umd.js",
6
6
  "module": "dist/index.es.js",