@box/blueprint-web 13.12.0 → 13.13.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 (5) hide show
  1. package/dist/lib-esm/index.css +88 -60
  2. package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
  3. package/dist/lib-esm/primitives/base-button/types.d.ts +1 -1
  4. package/dist/lib-esm/primitives/base-button/utils.js +3 -1
  5. package/package.json +3 -3
package/dist/lib-esm/index.css CHANGED
@@ -355,7 +355,7 @@
355
355
  }
356
356
  }
357
357
 
358
- .bp_base_button_module_button--7a69d[data-modern=true]{
358
+ .bp_base_button_module_button--bbe35[data-modern=true]{
359
359
  --button-border-radius:var(--bp-radius-10);
360
360
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
361
361
  font-size:var(--bp-font-size-05);
@@ -364,10 +364,10 @@
364
364
  letter-spacing:var(--bp-font-letter-spacing-01);
365
365
  line-height:var(--bp-font-line-height-04);
366
366
  }
367
- .bp_base_button_module_button--7a69d[data-modern=true]:not(:disabled)[data-focus-visible]{
367
+ .bp_base_button_module_button--bbe35[data-modern=true]:not(:disabled)[data-focus-visible]{
368
368
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
369
369
  }
370
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_primary--7a69d{
370
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_primary--bbe35{
371
371
  --button-color:var(--bp-text-text-on-dark);
372
372
  --button-background:var(--bp-surface-surface-brand);
373
373
  --button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
@@ -376,7 +376,7 @@
376
376
  --button-active-background:var(--bp-surface-surface-brand-pressed);
377
377
  --button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
378
378
  }
379
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_secondary--7a69d{
379
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_secondary--bbe35{
380
380
  --button-color:var(--bp-text-text-on-light);
381
381
  --button-background:var(--bp-surface-cta-surface-secondary);
382
382
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
@@ -386,14 +386,14 @@
386
386
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
387
387
  --button-backdrop-filter:blur(16px);
388
388
  }
389
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_tertiary--7a69d{
389
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_tertiary--bbe35{
390
390
  --button-color:var(--bp-text-cta-link);
391
391
  --button-background:var(--bp-surface-cta-surface-tertiary);
392
392
  --button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
393
393
  --button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
394
394
  --button-backdrop-filter:blur(16px);
395
395
  }
396
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_quaternary--7a69d{
396
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_quaternary--bbe35{
397
397
  --button-color:var(--bp-text-cta-link-secondary);
398
398
  --button-background:var(--bp-surface-cta-surface-quaternary);
399
399
  --button-border:var(--bp-border-01) solid #0000;
@@ -401,7 +401,15 @@
401
401
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
402
402
  --button-backdrop-filter:blur(16px);
403
403
  }
404
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_outline--7a69d{
404
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_tertiary-destructive--bbe35{
405
+ --button-color:var(--bp-text-text-destructive-on-light);
406
+ --button-background:var(--bp-surface-cta-destructive-surface-tertiary);
407
+ --button-border:var(--bp-border-01) solid #0000;
408
+ --button-focus-or-hover-background:var(--bp-surface-cta-destructive-surface-tertiary-hover);
409
+ --button-active-background:var(--bp-surface-cta-destructive-surface-tertiary-pressed);
410
+ --button-backdrop-filter:blur(16px);
411
+ }
412
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_outline--bbe35{
405
413
  --button-color:var(--bp-text-text-on-light);
406
414
  --button-background:var(--bp-surface-cta-surface-secondary);
407
415
  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
@@ -411,48 +419,48 @@
411
419
  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
412
420
  --button-backdrop-filter:blur(16px);
413
421
  }
414
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_small--7a69d{
422
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35{
415
423
  --button-small-gap:var(--bp-space-010);
416
424
  --button-small-min-height:var(--bp-size-080);
417
425
  --button-small-padding:0 var(--bp-size-030);
418
426
  }
419
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_small--7a69d.bp_base_button_module_isIconButton--7a69d{
427
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isIconButton--bbe35{
420
428
  --icon-button-small-width:var(--bp-size-080);
421
429
  --icon-button-small-height:var(--bp-size-080);
422
430
  --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
423
431
  }
424
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithIconEndButton--7a69d{
432
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
425
433
  --button-small-padding:0 0.625rem 0 var(--bp-space-030);
426
434
  }
427
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithIconStartButton--7a69d{
435
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
428
436
  --button-small-padding:0 var(--bp-space-030) 0 0.625rem;
429
437
  }
430
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithStartAndEndIconButton--7a69d{
438
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
431
439
  --button-small-padding:0 0.625rem 0 0.625rem;
432
440
  }
433
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_large--7a69d{
441
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35{
434
442
  --button-large-gap:var(--bp-space-020);
435
443
  --button-large-min-height:var(--bp-size-100);
436
444
  --button-large-padding:0 var(--bp-size-040);
437
445
  --button-large-font-size:var(--body-large-bold-font-size);
438
446
  --button-large-line-height:var(--body-large-bold-line-height);
439
447
  }
440
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_large--7a69d.bp_base_button_module_isIconButton--7a69d{
448
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isIconButton--bbe35{
441
449
  --icon-button-large-width:var(--bp-size-100);
442
450
  --icon-button-large-height:var(--bp-size-100);
443
451
  --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
444
452
  }
445
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithIconEndButton--7a69d{
453
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
446
454
  --button-large-padding:0 0.875rem 0 var(--bp-space-040);
447
455
  }
448
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithIconStartButton--7a69d{
456
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
449
457
  --button-large-padding:0 var(--bp-space-040) 0 0.875rem;
450
458
  }
451
- .bp_base_button_module_button--7a69d[data-modern=true].bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithStartAndEndIconButton--7a69d{
459
+ .bp_base_button_module_button--bbe35[data-modern=true].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
452
460
  --button-large-padding:0 0.875rem 0 0.875rem;
453
461
  }
454
462
 
455
- .bp_base_button_module_button--7a69d[data-modern=false]{
463
+ .bp_base_button_module_button--bbe35[data-modern=false]{
456
464
  --button-border-radius:var(--radius-2);
457
465
  font-family:var(--body-default-bold-font-family);
458
466
  font-size:var(--body-default-bold-font-size);
@@ -462,10 +470,10 @@
462
470
  text-decoration:var(--body-default-bold-text-decoration);
463
471
  text-transform:var(--body-default-bold-text-case);
464
472
  }
465
- .bp_base_button_module_button--7a69d[data-modern=false]:not(:disabled)[data-focus-visible]{
473
+ .bp_base_button_module_button--bbe35[data-modern=false]:not(:disabled)[data-focus-visible]{
466
474
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
467
475
  }
468
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_primary--7a69d{
476
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_primary--bbe35{
469
477
  --button-color:var(--text-text-brand-on-color);
470
478
  --button-background:var(--surface-surface-brand);
471
479
  --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -474,7 +482,7 @@
474
482
  --button-active-background:var(--surface-surface-brand-pressed);
475
483
  --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
476
484
  }
477
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_secondary--7a69d{
485
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_secondary--bbe35{
478
486
  --button-color:var(--text-text-on-light);
479
487
  --button-background:var(--surface-cta-surface-secondary);
480
488
  --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -484,7 +492,7 @@
484
492
  --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
485
493
  --button-backdrop-filter:none;
486
494
  }
487
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_tertiary--7a69d{
495
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_tertiary--bbe35{
488
496
  --button-color:var(--text-cta-link);
489
497
  --button-background:#0000;
490
498
  --button-border:var(--border-1) solid #0000;
@@ -492,7 +500,7 @@
492
500
  --button-active-background:var(--surface-cta-surface-tertiary-pressed);
493
501
  --button-backdrop-filter:none;
494
502
  }
495
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_quaternary--7a69d{
503
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_quaternary--bbe35{
496
504
  --button-color:var(--text-cta-link-secondary);
497
505
  --button-background:var(--bp-surface-cta-surface-quaternary);
498
506
  --button-border:var(--border-1) solid #0000;
@@ -500,7 +508,15 @@
500
508
  --button-active-background:var(--bp-surface-cta-surface-quaternary-pressed);
501
509
  --button-backdrop-filter:none;
502
510
  }
503
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_outline--7a69d{
511
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_tertiary-destructive--bbe35{
512
+ --button-color:var(--text-text-destructive-on-light);
513
+ --button-background:#0000;
514
+ --button-border:var(--border-1) solid #0000;
515
+ --button-focus-or-hover-background:var(--surface-cta-destructive-surface-tertiary-hover);
516
+ --button-active-background:var(--surface-cta-destructive-surface-tertiary-pressed);
517
+ --button-backdrop-filter:none;
518
+ }
519
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_outline--bbe35{
504
520
  --button-color:var(--text-text-on-light);
505
521
  --button-background:var(--surface-cta-surface-outline);
506
522
  --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -510,48 +526,48 @@
510
526
  --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
511
527
  --button-backdrop-filter:none;
512
528
  }
513
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_small--7a69d{
529
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35{
514
530
  --button-small-gap:var(--space-1);
515
531
  --button-small-min-height:var(--size-8);
516
532
  --button-small-padding:0 var(--space-4);
517
533
  }
518
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_small--7a69d.bp_base_button_module_isIconButton--7a69d{
534
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isIconButton--bbe35{
519
535
  --icon-button-small-width:var(--size-8);
520
536
  --icon-button-small-height:var(--size-8);
521
537
  --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
522
538
  }
523
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithIconEndButton--7a69d{
539
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
524
540
  --button-small-padding:0 var(--space-3);
525
541
  }
526
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithIconStartButton--7a69d{
542
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
527
543
  --button-small-padding:0 var(--space-3) 0 0.625rem;
528
544
  }
529
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithStartAndEndIconButton--7a69d{
545
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
530
546
  --button-small-padding:0 var(--space-3) 0 var(--space-3);
531
547
  }
532
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_large--7a69d{
548
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35{
533
549
  --button-large-gap:var(--space-2);
534
550
  --button-large-min-height:var(--size-10);
535
551
  --button-large-padding:0 var(--space-4);
536
552
  --button-large-font-size:var(--body-default-bold-font-size);
537
553
  --button-large-line-height:var(--body-default-bold-line-height);
538
554
  }
539
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_large--7a69d.bp_base_button_module_isIconButton--7a69d{
555
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isIconButton--bbe35{
540
556
  --icon-button-large-width:var(--size-10);
541
557
  --icon-button-large-height:var(--size-10);
542
558
  --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
543
559
  }
544
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithIconEndButton--7a69d{
560
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35{
545
561
  --button-large-padding:0 var(--space-4);
546
562
  }
547
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithIconStartButton--7a69d{
563
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35{
548
564
  --button-large-padding:0 var(--space-4) 0 0.875rem;
549
565
  }
550
- .bp_base_button_module_button--7a69d[data-modern=false].bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithStartAndEndIconButton--7a69d{
566
+ .bp_base_button_module_button--bbe35[data-modern=false].bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
551
567
  --button-large-padding:0 var(--space-4) 0 var(--space-4);
552
568
  }
553
569
 
554
- .bp_base_button_module_button--7a69d{
570
+ .bp_base_button_module_button--bbe35{
555
571
  border-radius:var(--button-border-radius);
556
572
  cursor:pointer;
557
573
  justify-content:center;
@@ -560,112 +576,124 @@
560
576
  user-select:none;
561
577
  white-space:nowrap;
562
578
  }
563
- .bp_base_button_module_button--7a69d,.bp_base_button_module_button--7a69d .bp_base_button_module_icon--7a69d{
579
+ .bp_base_button_module_button--bbe35,.bp_base_button_module_button--bbe35 .bp_base_button_module_icon--bbe35{
564
580
  align-items:center;
565
581
  display:flex;
566
582
  }
567
- .bp_base_button_module_button--7a69d:disabled{
583
+ .bp_base_button_module_button--bbe35:disabled{
568
584
  opacity:.3;
569
585
  }
570
- .bp_base_button_module_button--7a69d.bp_base_button_module_primary--7a69d{
586
+ .bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35{
571
587
  background:var(--button-background);
572
588
  border:var(--button-border);
573
589
  color:var(--button-color);
574
590
  }
575
- .bp_base_button_module_button--7a69d.bp_base_button_module_primary--7a69d:not(:disabled):hover,.bp_base_button_module_button--7a69d.bp_base_button_module_primary--7a69d:not(:disabled)[data-focus-visible]{
591
+ .bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35:not(:disabled)[data-focus-visible]{
576
592
  background:var(--button-focus-or-hover-background);
577
593
  border:var(--button-focus-or-hover-border);
578
594
  }
579
- .bp_base_button_module_button--7a69d.bp_base_button_module_primary--7a69d:not(:disabled):active{
595
+ .bp_base_button_module_button--bbe35.bp_base_button_module_primary--bbe35:not(:disabled):active{
580
596
  background:var(--button-active-background);
581
597
  border:var(--button-active-border);
582
598
  }
583
- .bp_base_button_module_button--7a69d.bp_base_button_module_secondary--7a69d{
599
+ .bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35{
584
600
  backdrop-filter:var(--button-backdrop-filter);
585
601
  background:var(--button-background);
586
602
  border:var(--button-border);
587
603
  color:var(--button-color);
588
604
  }
589
- .bp_base_button_module_button--7a69d.bp_base_button_module_secondary--7a69d:not(:disabled):hover,.bp_base_button_module_button--7a69d.bp_base_button_module_secondary--7a69d:not(:disabled)[data-focus-visible]{
605
+ .bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35:not(:disabled)[data-focus-visible]{
590
606
  background:var(--button-focus-or-hover-background);
591
607
  border:var(--button-focus-or-hover-border);
592
608
  }
593
- .bp_base_button_module_button--7a69d.bp_base_button_module_secondary--7a69d:not(:disabled):active{
609
+ .bp_base_button_module_button--bbe35.bp_base_button_module_secondary--bbe35:not(:disabled):active{
594
610
  background:var(--button-active-background);
595
611
  border:var(--button-active-border);
596
612
  }
597
- .bp_base_button_module_button--7a69d.bp_base_button_module_tertiary--7a69d{
613
+ .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35{
614
+ backdrop-filter:var(--button-backdrop-filter);
615
+ background:var(--button-background);
616
+ border:var(--button-border);
617
+ color:var(--button-color);
618
+ }
619
+ .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35:not(:disabled)[data-focus-visible]{
620
+ background:var(--button-focus-or-hover-background);
621
+ }
622
+ .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary-destructive--bbe35:not(:disabled):active{
623
+ background:var(--button-active-background);
624
+ }
625
+ .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35{
598
626
  backdrop-filter:var(--button-backdrop-filter);
599
627
  background:var(--button-background);
600
628
  border:var(--button-border);
601
629
  color:var(--button-color);
602
630
  }
603
- .bp_base_button_module_button--7a69d.bp_base_button_module_tertiary--7a69d:not(:disabled):hover,.bp_base_button_module_button--7a69d.bp_base_button_module_tertiary--7a69d:not(:disabled)[data-focus-visible]{
631
+ .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35:not(:disabled)[data-focus-visible]{
604
632
  background:var(--button-focus-or-hover-background);
605
633
  }
606
- .bp_base_button_module_button--7a69d.bp_base_button_module_tertiary--7a69d:not(:disabled):active{
634
+ .bp_base_button_module_button--bbe35.bp_base_button_module_tertiary--bbe35:not(:disabled):active{
607
635
  background:var(--button-active-background);
608
636
  }
609
- .bp_base_button_module_button--7a69d.bp_base_button_module_quaternary--7a69d{
637
+ .bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35{
610
638
  backdrop-filter:var(--button-backdrop-filter);
611
639
  background:var(--button-background);
612
640
  border:var(--button-border);
613
641
  color:var(--button-color);
614
642
  }
615
- .bp_base_button_module_button--7a69d.bp_base_button_module_quaternary--7a69d:not(:disabled):hover,.bp_base_button_module_button--7a69d.bp_base_button_module_quaternary--7a69d:not(:disabled)[data-focus-visible]{
643
+ .bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35:not(:disabled)[data-focus-visible]{
616
644
  background:var(--button-focus-or-hover-background);
617
645
  }
618
- .bp_base_button_module_button--7a69d.bp_base_button_module_quaternary--7a69d:not(:disabled):active{
646
+ .bp_base_button_module_button--bbe35.bp_base_button_module_quaternary--bbe35:not(:disabled):active{
619
647
  background:var(--button-active-background);
620
648
  }
621
- .bp_base_button_module_button--7a69d.bp_base_button_module_outline--7a69d{
649
+ .bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35{
622
650
  backdrop-filter:var(--button-backdrop-filter);
623
651
  background:var(--button-background);
624
652
  border:var(--button-border);
625
653
  color:var(--button-color);
626
654
  }
627
- .bp_base_button_module_button--7a69d.bp_base_button_module_outline--7a69d:not(:disabled):hover,.bp_base_button_module_button--7a69d.bp_base_button_module_outline--7a69d:not(:disabled)[data-focus-visible]{
655
+ .bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35:not(:disabled):hover,.bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35:not(:disabled)[data-focus-visible]{
628
656
  background:var(--button-focus-or-hover-background);
629
657
  border:var(--button-focus-or-hover-border);
630
658
  }
631
- .bp_base_button_module_button--7a69d.bp_base_button_module_outline--7a69d:not(:disabled):active{
659
+ .bp_base_button_module_button--bbe35.bp_base_button_module_outline--bbe35:not(:disabled):active{
632
660
  background:var(--button-active-background);
633
661
  border:var(--button-active-border);
634
662
  }
635
- .bp_base_button_module_button--7a69d.bp_base_button_module_small--7a69d{
663
+ .bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35{
636
664
  gap:var(--button-small-gap);
637
665
  min-height:var(--button-small-min-height);
638
666
  padding:var(--button-small-padding);
639
667
  }
640
- .bp_base_button_module_button--7a69d.bp_base_button_module_small--7a69d.bp_base_button_module_isIconButton--7a69d{
668
+ .bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isIconButton--bbe35{
641
669
  height:var(--icon-button-small-height);
642
670
  min-height:unset;
643
671
  padding:var(--icon-button-small-padding);
644
672
  width:var(--icon-button-small-width);
645
673
  }
646
- .bp_base_button_module_button--7a69d.bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithIconEndButton--7a69d,.bp_base_button_module_button--7a69d.bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithIconStartButton--7a69d,.bp_base_button_module_button--7a69d.bp_base_button_module_small--7a69d.bp_base_button_module_isTextWithStartAndEndIconButton--7a69d{
674
+ .bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_small--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
647
675
  padding:var(--button-small-padding);
648
676
  }
649
- .bp_base_button_module_button--7a69d.bp_base_button_module_large--7a69d{
677
+ .bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35{
650
678
  font-size:var(--button-large-font-size);
651
679
  gap:var(--button-large-gap);
652
680
  line-height:var(--button-large-line-height);
653
681
  min-height:var(--button-large-min-height);
654
682
  padding:var(--button-large-padding);
655
683
  }
656
- .bp_base_button_module_button--7a69d.bp_base_button_module_large--7a69d.bp_base_button_module_isIconButton--7a69d{
684
+ .bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isIconButton--bbe35{
657
685
  height:var(--icon-button-large-height);
658
686
  padding:var(--icon-button-large-padding);
659
687
  width:var(--icon-button-large-width);
660
688
  }
661
- .bp_base_button_module_button--7a69d.bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithIconEndButton--7a69d,.bp_base_button_module_button--7a69d.bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithIconStartButton--7a69d,.bp_base_button_module_button--7a69d.bp_base_button_module_large--7a69d.bp_base_button_module_isTextWithStartAndEndIconButton--7a69d{
689
+ .bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconEndButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithIconStartButton--bbe35,.bp_base_button_module_button--bbe35.bp_base_button_module_large--bbe35.bp_base_button_module_isTextWithStartAndEndIconButton--bbe35{
662
690
  padding:var(--button-large-padding);
663
691
  }
664
- .bp_base_button_module_button--7a69d.bp_base_button_module_hide--7a69d{
692
+ .bp_base_button_module_button--bbe35.bp_base_button_module_hide--bbe35{
665
693
  pointer-events:none;
666
694
  position:relative;
667
695
  }
668
- .bp_base_button_module_button--7a69d.bp_base_button_module_hide--7a69d span{
696
+ .bp_base_button_module_button--bbe35.bp_base_button_module_hide--bbe35 span{
669
697
  color:#0000;
670
698
  opacity:0;
671
699
  }
package/dist/lib-esm/primitives/base-button/base-button.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"button":"bp_base_button_module_button--7a69d","primary":"bp_base_button_module_primary--7a69d","secondary":"bp_base_button_module_secondary--7a69d","tertiary":"bp_base_button_module_tertiary--7a69d","quaternary":"bp_base_button_module_quaternary--7a69d","outline":"bp_base_button_module_outline--7a69d","small":"bp_base_button_module_small--7a69d","isIconButton":"bp_base_button_module_isIconButton--7a69d","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--7a69d","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--7a69d","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--7a69d","large":"bp_base_button_module_large--7a69d","icon":"bp_base_button_module_icon--7a69d","hide":"bp_base_button_module_hide--7a69d"};
2
+ var styles = {"button":"bp_base_button_module_button--bbe35","primary":"bp_base_button_module_primary--bbe35","secondary":"bp_base_button_module_secondary--bbe35","tertiary":"bp_base_button_module_tertiary--bbe35","quaternary":"bp_base_button_module_quaternary--bbe35","tertiary-destructive":"bp_base_button_module_tertiary-destructive--bbe35","outline":"bp_base_button_module_outline--bbe35","small":"bp_base_button_module_small--bbe35","isIconButton":"bp_base_button_module_isIconButton--bbe35","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--bbe35","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--bbe35","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--bbe35","large":"bp_base_button_module_large--bbe35","icon":"bp_base_button_module_icon--bbe35","hide":"bp_base_button_module_hide--bbe35"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/primitives/base-button/types.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface Loading {
9
9
  }
10
10
  export interface BaseButtonInterface extends AriakitButtonProps {
11
11
  /** The visual style of the button. */
12
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'outline';
12
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiary-destructive' | 'quaternary' | 'outline';
13
13
  /** The size of the button. */
14
14
  size?: 'small' | 'large';
15
15
  }
package/dist/lib-esm/primitives/base-button/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { IconIconOnLight, TextCtaLinkSecondary, TextCtaLink, IconIconOnDark, bpSize050, bpSize040, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
1
+ import { IconIconOnLight, TextCtaLinkSecondary, TextTextDestructiveOnLight, TextCtaLink, IconIconOnDark, bpSize050, bpSize040, Size5, Size4, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
2
2
  import { Children, isValidElement } from 'react';
3
3
 
4
4
  function getButtonTypeFromChildren(children, baseButtonIcon, baseButtonLabel) {
@@ -41,6 +41,7 @@ const loadingIndicatorVariantMap = {
41
41
  primary: 'light',
42
42
  secondary: 'default',
43
43
  tertiary: 'default',
44
+ 'tertiary-destructive': 'default',
44
45
  quaternary: 'dark',
45
46
  outline: 'dark'
46
47
  };
@@ -48,6 +49,7 @@ const buttonVariantToIconColorMap = {
48
49
  primary: IconIconOnDark,
49
50
  secondary: IconIconOnLight,
50
51
  tertiary: TextCtaLink,
52
+ 'tertiary-destructive': TextTextDestructiveOnLight,
51
53
  quaternary: TextCtaLinkSecondary,
52
54
  outline: IconIconOnLight
53
55
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "13.12.0",
3
+ "version": "13.13.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.111.3",
50
+ "@box/blueprint-web-assets": "^4.111.4",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.17.3",
80
+ "@box/storybook-utils": "^0.17.4",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",