@rogieking/figui3 1.4.7 → 1.4.8

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/fig.css +51 -7
  2. package/package.json +1 -1
package/fig.css CHANGED
@@ -53,6 +53,7 @@
53
53
  --figma-color-border-danger-strong: #dc3412;
54
54
  --figma-color-border-disabled: #e6e6e6;
55
55
  --figma-color-border-disabled-strong: #0000004d;
56
+ --figma-color-border-menu: #383838;
56
57
  --figma-color-border-onbrand: #007be5;
57
58
  --figma-color-border-onbrand-strong: #ffffff;
58
59
  --figma-color-border-oncomponent: #8638e5;
@@ -460,7 +461,7 @@
460
461
  --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
461
462
  rgba(255, 255, 255, 0.08) inset,
462
463
  0px 10px 16px 0px rgba(0, 0, 0, 0.35),
463
- 0px 0px 0.5px 0px rgba(255, 255, 255, 0.35) inset,
464
+ inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
464
465
  0px 2px 5px 0px rgba(0, 0, 0, 0.35);
465
466
 
466
467
  --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
@@ -652,22 +653,64 @@ input[type="text"][list] {
652
653
  option {
653
654
  display: flex;
654
655
  gap: var(--spacer-1);
655
- padding: 0 var(--spacer-2) 0 var(--spacer-1);
656
- border-radius: var(--radius-medium);
657
- min-width: 5rem;
656
+ padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
658
657
  font-weight: var(--body-medium-fontWeight);
659
658
  color: var(--figma-color-text-menu);
660
- &:hover {
661
- background-color: var(--figma-color-bg-menu-hover);
659
+ position: relative;
660
+ &[hidden] {
661
+ display: none;
662
+ }
663
+ &:not(:checked):before {
664
+ content: "";
665
+ display: block;
666
+ position: absolute;
667
+ inset: 0 var(--spacer-2);
668
+ border-radius: var(--radius-medium);
669
+ z-index: -1;
670
+ background-color: transparent;
671
+ }
672
+ &:hover,
673
+ &:active,
674
+ &:focus {
675
+ background-color: transparent;
676
+ outline: 0;
677
+ &:before {
678
+ background-color: var(--figma-color-bg-menu-hover);
679
+ }
662
680
  }
663
681
  }
664
682
  optgroup {
665
683
  color: var(--figma-color-text-menu-secondary);
666
684
  text-align: left;
685
+ position: relative;
686
+ padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
667
687
  font-weight: var(--body-medium-fontWeight);
688
+ &::-internal-optgroup-label {
689
+ display: none;
690
+ }
668
691
  legend {
669
692
  padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
670
693
  }
694
+ option {
695
+ margin: 0 calc(var(--spacer-1) * -1);
696
+ margin-left: calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1);
697
+ }
698
+ &:not(:first-child) {
699
+ margin-top: var(--spacer-2);
700
+ padding-top: var(--spacer-2);
701
+
702
+ &:before {
703
+ content: "";
704
+ display: block;
705
+ position: absolute;
706
+ left: 0;
707
+ right: 0;
708
+ top: 1px;
709
+ height: 1px;
710
+ background-color: var(--figma-color-border-menu);
711
+ margin-bottom: var(--spacer-2);
712
+ }
713
+ }
671
714
  }
672
715
  }
673
716
  ::picker-icon {
@@ -677,12 +720,13 @@ input[type="text"][list] {
677
720
  ::picker(select) {
678
721
  appearance: base-select;
679
722
  scrollbar-width: thin;
723
+ outline: 0;
680
724
  scrollbar-color: var(--figma-color-text-menu-tertiary)
681
725
  var(--figma-color-bg-menu);
682
726
  border-radius: var(--radius-large);
683
727
  border: 0;
684
728
  background-color: var(--figma-color-bg-menu);
685
- padding: var(--spacer-2);
729
+ padding: var(--spacer-2) 0;
686
730
  box-shadow: var(--figma-elevation-400-menu-panel);
687
731
  }
688
732
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "1.4.7",
3
+ "version": "1.4.8",
4
4
  "module": "index.ts",
5
5
  "type": "module",
6
6
  "devDependencies": {