@rogieking/figui3 1.4.5 → 1.4.7
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/example.html +12 -0
- package/fig.css +13 -10
- package/package.json +1 -1
package/example.html
CHANGED
|
@@ -32,11 +32,23 @@
|
|
|
32
32
|
<legend>Numbers</legend>
|
|
33
33
|
<option>One</option>
|
|
34
34
|
<option>Two</option>
|
|
35
|
+
<option>One</option>
|
|
36
|
+
<option>Two</option>
|
|
37
|
+
<option>One</option>
|
|
38
|
+
<option>Two</option>
|
|
35
39
|
</optgroup>
|
|
36
40
|
<optgroup label="Fruits">
|
|
37
41
|
<legend>Fruits</legend>
|
|
38
42
|
<option>Apple</option>
|
|
39
43
|
<option>Banana</option>
|
|
44
|
+
<option>Apple</option>
|
|
45
|
+
<option>Banana</option>
|
|
46
|
+
<option>Apple</option>
|
|
47
|
+
<option>Banana</option>
|
|
48
|
+
<option>Apple</option>
|
|
49
|
+
<option>Banana</option>
|
|
50
|
+
<option>Apple</option>
|
|
51
|
+
<option>Banana</option>
|
|
40
52
|
</optgroup>
|
|
41
53
|
</select>
|
|
42
54
|
|
package/fig.css
CHANGED
|
@@ -174,6 +174,9 @@
|
|
|
174
174
|
--figma-color-text-warning: #b86200;
|
|
175
175
|
--figma-color-text-warning-secondary: #b86200;
|
|
176
176
|
--figma-color-text-warning-tertiary: #b86200;
|
|
177
|
+
--figma-color-text-menu: #ffffff;
|
|
178
|
+
--figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
|
|
179
|
+
--figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.4);
|
|
177
180
|
}
|
|
178
181
|
|
|
179
182
|
@media (prefers-color-scheme: dark) {
|
|
@@ -434,7 +437,7 @@
|
|
|
434
437
|
color-scheme: light dark;
|
|
435
438
|
/* Icons */
|
|
436
439
|
--icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 90%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
|
|
437
|
-
|
|
440
|
+
--icon-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7773 4.08403C12.0071 4.2372 12.0692 4.54764 11.916 4.7774L7.91603 10.7774C7.83293 10.902 7.69834 10.9829 7.54927 10.9976C7.4002 11.0124 7.25237 10.9595 7.14645 10.8536L4.14645 7.85361C3.95118 7.65834 3.95118 7.34176 4.14645 7.1465C4.34171 6.95124 4.65829 6.95124 4.85355 7.1465L7.42229 9.71523L11.084 4.2227C11.2372 3.99294 11.5476 3.93085 11.7773 4.08403Z' fill='white'/%3E%3C/svg%3E%0A");
|
|
438
441
|
/* Elevations */
|
|
439
442
|
--figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
|
|
440
443
|
0px 1px 3px 0px rgba(0, 0, 0, 0.15);
|
|
@@ -638,12 +641,14 @@ input[type="text"][list] {
|
|
|
638
641
|
@supports (appearance: base-select) {
|
|
639
642
|
select {
|
|
640
643
|
appearance: base-select;
|
|
644
|
+
|
|
641
645
|
option::checkmark {
|
|
642
|
-
content:
|
|
646
|
+
content: var(--icon-checkmark);
|
|
643
647
|
display: block;
|
|
644
648
|
width: 1rem;
|
|
645
649
|
height: 1rem;
|
|
646
650
|
}
|
|
651
|
+
|
|
647
652
|
option {
|
|
648
653
|
display: flex;
|
|
649
654
|
gap: var(--spacer-1);
|
|
@@ -651,13 +656,13 @@ input[type="text"][list] {
|
|
|
651
656
|
border-radius: var(--radius-medium);
|
|
652
657
|
min-width: 5rem;
|
|
653
658
|
font-weight: var(--body-medium-fontWeight);
|
|
654
|
-
color: var(--figma-color-text);
|
|
659
|
+
color: var(--figma-color-text-menu);
|
|
655
660
|
&:hover {
|
|
656
661
|
background-color: var(--figma-color-bg-menu-hover);
|
|
657
662
|
}
|
|
658
663
|
}
|
|
659
664
|
optgroup {
|
|
660
|
-
color: var(--figma-color-text-secondary);
|
|
665
|
+
color: var(--figma-color-text-menu-secondary);
|
|
661
666
|
text-align: left;
|
|
662
667
|
font-weight: var(--body-medium-fontWeight);
|
|
663
668
|
legend {
|
|
@@ -671,18 +676,16 @@ input[type="text"][list] {
|
|
|
671
676
|
|
|
672
677
|
::picker(select) {
|
|
673
678
|
appearance: base-select;
|
|
679
|
+
scrollbar-width: thin;
|
|
680
|
+
scrollbar-color: var(--figma-color-text-menu-tertiary)
|
|
681
|
+
var(--figma-color-bg-menu);
|
|
674
682
|
border-radius: var(--radius-large);
|
|
675
|
-
background-color: var(--figma-color-bg-menu);
|
|
676
|
-
color: var(--figma-color-text);
|
|
677
683
|
border: 0;
|
|
684
|
+
background-color: var(--figma-color-bg-menu);
|
|
678
685
|
padding: var(--spacer-2);
|
|
679
686
|
box-shadow: var(--figma-elevation-400-menu-panel);
|
|
680
|
-
option {
|
|
681
|
-
background-color: red !important;
|
|
682
|
-
}
|
|
683
687
|
}
|
|
684
688
|
}
|
|
685
|
-
|
|
686
689
|
input[type="text"][list]:hover,
|
|
687
690
|
input[type="text"][list]:active,
|
|
688
691
|
input[type="text"][list]:focus,
|