@uniai-fe/uds-primitives 0.1.12 → 0.1.13

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/styles.css +72 -114
  2. package/package.json +1 -1
  3. package/src/components/button/styles/button.scss +291 -276
  4. package/src/components/button/styles/round-button.scss +63 -50
  5. package/src/components/button/styles/text-button.scss +93 -81
package/dist/styles.css CHANGED
@@ -489,7 +489,7 @@
489
489
 
490
490
 
491
491
  /* Primitives 버튼 공통 스타일 */
492
- :where(.button) {
492
+ .button {
493
493
  display: flex;
494
494
  align-items: center;
495
495
  justify-content: center;
@@ -507,301 +507,268 @@
507
507
  filter: none;
508
508
  cursor: pointer;
509
509
  }
510
- :where(.button) span {
510
+ .button span {
511
511
  font-family: var(--font-caption-medium-family, var(--theme-button-font-body-medium-family, var(--font-body-medium-family, "Pretendard")));
512
512
  font-size: var(--font-caption-medium-size, var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 16px)));
513
513
  font-weight: var(--font-caption-medium-weight, var(--theme-button-font-weight, 400));
514
514
  line-height: var(--font-caption-medium-line-height, var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 24px)));
515
515
  letter-spacing: var(--font-caption-medium-letter-spacing, var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px)));
516
516
  }
517
- :where(.button) .button-icon,
518
- :where(.button) .button-label,
519
- :where(.button) .button-left,
520
- :where(.button) .button-right {
517
+ .button .button-icon,
518
+ .button .button-label,
519
+ .button .button-left,
520
+ .button .button-right {
521
521
  display: inline-flex;
522
522
  align-items: center;
523
523
  justify-content: center;
524
524
  }
525
- :where(.button).button-block {
525
+ .button.button-block {
526
526
  width: 100%;
527
527
  }
528
-
529
- :where(.button):not(.button-fill-solid):not(.button-fill-outlined) {
528
+ .button:not(.button-fill-solid):not(.button-fill-outlined) {
530
529
  background-color: transparent;
531
530
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
532
531
  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
533
532
  }
534
- :where(.button):not(.button-fill-solid):not(.button-fill-outlined):hover:not(:disabled):not([aria-disabled=true]), :where(.button):not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
533
+ .button:not(.button-fill-solid):not(.button-fill-outlined):hover:not(:disabled):not([aria-disabled=true]), .button:not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
535
534
  background-color: var(--theme-button-color-cool-gray-95, var(--color-cool-gray-95));
536
535
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
537
536
  }
538
- :where(.button):not(.button-fill-solid):not(.button-fill-outlined):active:not(:disabled):not([aria-disabled=true]), :where(.button):not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
537
+ .button:not(.button-fill-solid):not(.button-fill-outlined):active:not(:disabled):not([aria-disabled=true]), .button:not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
539
538
  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
540
539
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
541
540
  }
542
-
543
- :where(.button)[aria-busy=true] {
541
+ .button:where([aria-busy=true]) {
544
542
  pointer-events: none;
545
543
  cursor: progress;
546
544
  }
547
-
548
- :where(.button.button-fill-solid.button-priority-primary) {
545
+ .button:where(.button-fill-solid.button-priority-primary) {
549
546
  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
550
547
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
551
548
  color: var(--theme-button-color-common-100, var(--color-common-100));
552
549
  }
553
- :where(.button.button-fill-solid.button-priority-primary):disabled, :where(.button.button-fill-solid.button-priority-primary)[aria-disabled=true] {
550
+ .button:where(.button-fill-solid.button-priority-primary):disabled, .button:where(.button-fill-solid.button-priority-primary)[aria-disabled=true] {
554
551
  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
555
552
  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
556
553
  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
557
554
  }
558
- :where(.button.button-fill-solid.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
555
+ .button:where(.button-fill-solid.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
559
556
  background-color: var(--theme-button-color-blue-50, var(--color-blue-50));
560
557
  border-color: var(--theme-button-color-blue-50, var(--color-blue-50));
561
558
  }
562
- :where(.button.button-fill-solid.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
559
+ .button:where(.button-fill-solid.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
563
560
  background-color: var(--theme-button-color-blue-45, var(--color-blue-45));
564
561
  border-color: var(--theme-button-color-blue-45, var(--color-blue-45));
565
562
  }
566
-
567
- :where(.button.button-fill-outlined.button-priority-primary) {
563
+ .button:where(.button-fill-outlined.button-priority-primary) {
568
564
  background-color: transparent;
569
565
  color: var(--theme-button-color-primary-default, var(--color-primary-default));
570
566
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
571
567
  }
572
- :where(.button.button-fill-outlined.button-priority-primary):disabled, :where(.button.button-fill-outlined.button-priority-primary)[aria-disabled=true] {
568
+ .button:where(.button-fill-outlined.button-priority-primary):disabled, .button:where(.button-fill-outlined.button-priority-primary)[aria-disabled=true] {
573
569
  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
574
570
  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
575
571
  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
576
572
  }
577
- :where(.button.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
573
+ .button:where(.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
578
574
  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
579
575
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
580
576
  }
581
- :where(.button.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
577
+ .button:where(.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
582
578
  background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
583
579
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
584
580
  }
585
-
586
- :where(.button.button-fill-solid.button-priority-secondary) {
581
+ .button:where(.button-fill-solid.button-priority-secondary) {
587
582
  background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
588
583
  border-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
589
584
  color: var(--theme-button-color-primary-default, var(--color-primary-default));
590
585
  }
591
- :where(.button.button-fill-solid.button-priority-secondary):disabled, :where(.button.button-fill-solid.button-priority-secondary)[aria-disabled=true] {
586
+ .button:where(.button-fill-solid.button-priority-secondary):disabled, .button:where(.button-fill-solid.button-priority-secondary)[aria-disabled=true] {
592
587
  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
593
588
  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
594
589
  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
595
590
  }
596
- :where(.button.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
591
+ .button:where(.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
597
592
  background-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
598
593
  border-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
599
594
  }
600
- :where(.button.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
595
+ .button:where(.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
601
596
  background-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
602
597
  border-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
603
598
  }
604
-
605
- :where(.button.button-fill-outlined.button-priority-secondary) {
599
+ .button:where(.button-fill-outlined.button-priority-secondary) {
606
600
  background-color: transparent;
607
601
  color: var(--theme-button-color-primary-default, var(--color-primary-default));
608
602
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
609
603
  }
610
- :where(.button.button-fill-outlined.button-priority-secondary):disabled, :where(.button.button-fill-outlined.button-priority-secondary)[aria-disabled=true] {
604
+ .button:where(.button-fill-outlined.button-priority-secondary):disabled, .button:where(.button-fill-outlined.button-priority-secondary)[aria-disabled=true] {
611
605
  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
612
606
  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
613
607
  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
614
608
  }
615
- :where(.button.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
609
+ .button:where(.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
616
610
  background-color: var(--theme-button-color-blue-90, var(--color-blue-90));
617
611
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
618
612
  }
619
- :where(.button.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
613
+ .button:where(.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
620
614
  background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
621
615
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
622
616
  }
623
-
624
- :where(.button.button-fill-solid.button-priority-tertiary) {
617
+ .button:where(.button-fill-solid.button-priority-tertiary) {
625
618
  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
626
619
  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
627
620
  color: var(--theme-button-tertiary-solid-foreground, var(--color-label-neutral));
628
621
  }
629
- :where(.button.button-fill-solid.button-priority-tertiary):disabled, :where(.button.button-fill-solid.button-priority-tertiary)[aria-disabled=true] {
622
+ .button:where(.button-fill-solid.button-priority-tertiary):disabled, .button:where(.button-fill-solid.button-priority-tertiary)[aria-disabled=true] {
630
623
  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
631
624
  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
632
625
  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
633
626
  }
634
- :where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
627
+ .button:where(.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
635
628
  background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
636
629
  border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
637
630
  }
638
- :where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
631
+ .button:where(.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
639
632
  background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
640
633
  border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
641
634
  }
642
-
643
- :where(.button.button-fill-outlined.button-priority-tertiary) {
635
+ .button:where(.button-fill-outlined.button-priority-tertiary) {
644
636
  background-color: transparent;
645
637
  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
646
638
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
647
639
  }
648
- :where(.button.button-fill-outlined.button-priority-tertiary):disabled, :where(.button.button-fill-outlined.button-priority-tertiary)[aria-disabled=true] {
640
+ .button:where(.button-fill-outlined.button-priority-tertiary):disabled, .button:where(.button-fill-outlined.button-priority-tertiary)[aria-disabled=true] {
649
641
  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
650
642
  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
651
643
  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
652
644
  }
653
- :where(.button.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
645
+ .button:where(.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
654
646
  background-color: var(--theme-button-color-cool-gray-95, var(--color-cool-gray-95));
655
647
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
656
648
  }
657
- :where(.button.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
649
+ .button:where(.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
658
650
  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
659
651
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
660
652
  }
661
-
662
- :where(.button.button-size-small) {
653
+ .button:where(.button-size-small) {
663
654
  padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
664
655
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
665
656
  padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px));
666
657
  min-height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
667
658
  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
668
659
  }
669
- :where(.button.button-size-small) span {
660
+ .button:where(.button-size-small) span {
670
661
  font-size: var(--theme-button-font-label-medium-size, var(--font-label-medium-size, 14px));
671
662
  font-weight: var(--theme-button-font-weight, 400);
672
663
  line-height: var(--theme-button-font-label-medium-line-height, var(--font-label-medium-line-height, 1.5em));
673
664
  letter-spacing: var(--theme-button-font-label-medium-letter-spacing, var(--font-label-medium-letter-spacing, 0px));
674
665
  }
675
-
676
- :where(.button.button-size-medium) {
666
+ .button:where(.button-size-medium) {
677
667
  padding-inline: var(--theme-button-padding-7, var(--spacing-padding-7, 20px));
678
668
  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
679
669
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
680
670
  min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
681
671
  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
682
672
  }
683
- :where(.button.button-size-medium) span {
673
+ .button:where(.button-size-medium) span {
684
674
  font-size: var(--theme-button-font-label-large-size, var(--font-label-large-size, 16px));
685
675
  font-weight: var(--theme-button-font-weight, 400);
686
676
  line-height: var(--theme-button-font-label-large-line-height, var(--font-label-large-line-height, 1.5em));
687
677
  letter-spacing: var(--theme-button-font-label-large-letter-spacing, var(--font-label-large-letter-spacing, 0px));
688
678
  }
689
-
690
- :where(.button.button-size-large) {
679
+ .button:where(.button-size-large) {
691
680
  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
692
681
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
693
682
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
694
683
  min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
695
684
  border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
696
685
  }
697
- :where(.button.button-size-large) span {
686
+ .button:where(.button-size-large) span {
698
687
  font-size: var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 17px));
699
688
  font-weight: var(--theme-button-font-weight, 400);
700
689
  line-height: var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 1.5em));
701
690
  letter-spacing: var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px));
702
691
  }
703
-
704
- :where(.button.button-size-xlarge) {
692
+ .button:where(.button-size-xlarge) {
705
693
  padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
706
694
  gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
707
695
  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
708
696
  min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
709
697
  border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
710
698
  }
711
- :where(.button.button-size-xlarge) span {
699
+ .button:where(.button-size-xlarge) span {
712
700
  font-size: var(--theme-button-font-body-large-size, var(--font-body-large-size, 19px));
713
701
  font-weight: var(--theme-button-font-weight, 400);
714
702
  line-height: var(--theme-button-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
715
703
  letter-spacing: var(--theme-button-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
716
704
  }
717
-
718
- :where(.button.button-fill-outlined) {
705
+ .button:where(.button-fill-outlined) {
719
706
  box-shadow: none;
720
707
  }
721
-
722
- :where(.button.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
723
- background-color: transparent;
724
- border-color: transparent;
725
- box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0);
726
- }
727
- :where(.button.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
728
- background-color: transparent;
729
- border-color: transparent;
730
- box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0);
731
- }
732
-
733
- .button.button-fill-solid.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
708
+ .button :where(.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button :where(.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
734
709
  background-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
735
710
  border-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
736
711
  box-shadow: none;
737
712
  }
738
- .button.button-fill-solid.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
713
+ .button :where(.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button :where(.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
739
714
  background-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
740
715
  border-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
741
716
  box-shadow: none;
742
717
  }
743
-
744
- :where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
718
+ .button:where(.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
745
719
  background-color: var(--color-border-strong, var(--color-surface-strong));
746
720
  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
747
721
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
748
722
  }
749
- :where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
723
+ .button:where(.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
750
724
  background-color: var(--color-border-strong, var(--color-surface-strong));
751
725
  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
752
726
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
753
727
  }
754
-
755
- :where(.button.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
728
+ .button:where(.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
756
729
  background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
757
730
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
758
731
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
759
732
  }
760
- :where(.button.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
733
+ .button:where(.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
761
734
  background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
762
735
  border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
763
736
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
764
737
  }
765
-
766
- :where(.button.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
738
+ .button:where(.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
767
739
  background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
768
740
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
769
741
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
770
742
  }
771
- :where(.button.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
743
+ .button:where(.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
772
744
  background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
773
745
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
774
746
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
775
747
  }
776
-
777
- :where(.button.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
748
+ .button:where(.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
778
749
  background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
779
750
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
780
751
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
781
752
  }
782
- :where(.button.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
753
+ .button:where(.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), .button:where(.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
783
754
  background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
784
755
  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
785
756
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
786
757
  }
787
-
788
- :where(.button:disabled),
789
- :where(.button[aria-disabled=true]) {
758
+ .button:where(:disabled), .button:where([aria-disabled=true]) {
790
759
  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
791
760
  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
792
761
  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
793
762
  cursor: not-allowed;
794
763
  }
795
-
796
- :where(.button.button-icon-left) .button-label {
764
+ .button:where(.button-icon-left) .button-label {
797
765
  margin-left: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
798
766
  }
799
-
800
- :where(.button.button-icon-right) .button-label {
767
+ .button:where(.button-icon-right) .button-label {
801
768
  margin-right: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
802
769
  }
803
770
 
804
- :where(.button.button-template-text) {
771
+ .button:where(.button-template-text) {
805
772
  min-width: auto;
806
773
  border-color: transparent;
807
774
  background-color: transparent;
@@ -811,67 +778,58 @@
811
778
  gap: var(--spacing-gap-1, 4px);
812
779
  border-radius: var(--theme-button-text-radius, var(--theme-radius-small, 4px));
813
780
  }
814
-
815
- :where(.button.button-template-text-size-small) {
781
+ .button:where(.button-template-text-size-small) {
816
782
  min-height: var(--theme-button-text-min-height-small, var(--theme-size-small-1, 20px));
817
783
  padding-inline: var(--theme-button-text-padding-inline-small, var(--spacing-padding-4, 8px));
818
784
  }
819
-
820
- :where(.button.button-template-text-size-medium) {
785
+ .button:where(.button-template-text-size-medium) {
821
786
  min-height: var(--theme-button-text-min-height-medium, var(--theme-size-small-2, 24px));
822
787
  padding-inline: var(--theme-button-text-padding-inline-medium, var(--spacing-padding-5, 12px));
823
788
  }
824
-
825
- :where(.button.button-template-text-size-large) {
789
+ .button:where(.button-template-text-size-large) {
826
790
  min-height: var(--theme-button-text-min-height-large, var(--theme-size-small-3, 32px));
827
791
  padding-inline: var(--theme-button-text-padding-inline-large, var(--spacing-padding-5, 12px));
828
792
  }
829
-
830
- :where(.button.button-template-text:disabled) {
793
+ .button:where(.button-template-text:disabled) {
831
794
  background-color: transparent;
832
795
  border-color: transparent;
833
796
  }
834
-
835
- :where(.button.button-template-text.button-priority-secondary) {
797
+ .button:where(.button-template-text.button-priority-secondary) {
836
798
  color: var(--theme-button-color-primary-default, var(--color-primary-default));
837
799
  }
838
- :where(.button.button-template-text.button-priority-secondary):hover:not(:disabled), :where(.button.button-template-text.button-priority-secondary)[data-user-action=hover]:not(:disabled) {
800
+ .button:where(.button-template-text.button-priority-secondary):hover:not(:disabled), .button:where(.button-template-text.button-priority-secondary)[data-user-action=hover]:not(:disabled) {
839
801
  background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
840
802
  }
841
- :where(.button.button-template-text.button-priority-secondary):active:not(:disabled), :where(.button.button-template-text.button-priority-secondary)[data-user-action=pressed]:not(:disabled) {
803
+ .button:where(.button-template-text.button-priority-secondary):active:not(:disabled), .button:where(.button-template-text.button-priority-secondary)[data-user-action=pressed]:not(:disabled) {
842
804
  background-color: var(--color-secondary-strong, var(--color-blue-90));
843
805
  }
844
-
845
- :where(.button.button-template-text.button-priority-tertiary) {
806
+ .button:where(.button-template-text.button-priority-tertiary) {
846
807
  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
847
808
  }
848
- :where(.button.button-template-text.button-priority-tertiary):hover:not(:disabled), :where(.button.button-template-text.button-priority-tertiary)[data-user-action=hover]:not(:disabled) {
809
+ .button:where(.button-template-text.button-priority-tertiary):hover:not(:disabled), .button:where(.button-template-text.button-priority-tertiary)[data-user-action=hover]:not(:disabled) {
849
810
  background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
850
811
  }
851
- :where(.button.button-template-text.button-priority-tertiary):active:not(:disabled), :where(.button.button-template-text.button-priority-tertiary)[data-user-action=pressed]:not(:disabled) {
812
+ .button:where(.button-template-text.button-priority-tertiary):active:not(:disabled), .button:where(.button-template-text.button-priority-tertiary)[data-user-action=pressed]:not(:disabled) {
852
813
  background-color: var(--color-surface-strong, var(--color-cool-gray-20));
853
814
  }
854
815
 
855
- :where(.button.button-template-round) {
816
+ .button:where(.button-template-round) {
856
817
  min-width: auto;
857
818
  padding-block: var(--theme-button-round-padding-block, var(--spacing-padding-2, 4px));
858
819
  padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
859
820
  gap: var(--spacing-gap-2, 8px);
860
821
  }
861
-
862
- :where(.button.button-template-round-size-small) {
822
+ .button:where(.button-template-round-size-small) {
863
823
  min-height: var(--theme-button-round-min-height-small, var(--theme-size-small-2, 24px));
864
824
  padding-inline: var(--theme-button-round-padding-inline-small, var(--spacing-padding-5, 12px));
865
825
  border-radius: var(--theme-button-round-radius-small, var(--theme-radius-xlarge-2, 16px));
866
826
  }
867
-
868
- :where(.button.button-template-round-size-medium) {
827
+ .button:where(.button-template-round-size-medium) {
869
828
  min-height: var(--theme-button-round-min-height-medium, var(--theme-size-small-3, 32px));
870
829
  padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
871
830
  border-radius: var(--theme-button-round-radius-medium, var(--theme-radius-xlarge-2, 16px));
872
831
  }
873
-
874
- :where(.button.button-template-round-size-large) {
832
+ .button:where(.button-template-round-size-large) {
875
833
  min-height: var(--theme-button-round-min-height-large, var(--theme-size-medium-1, 40px));
876
834
  padding-inline: var(--theme-button-round-padding-inline-large, var(--spacing-padding-7, 20px));
877
835
  border-radius: var(--theme-button-round-radius-large, 30px);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-primitives",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "description": "UNIAI Design System; Primitives Components Package",
5
5
  "type": "module",
6
6
  "private": false,