@rogieking/figui3 1.0.63 → 1.0.64
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 +138 -0
- package/fig.css +76 -26
- package/package.json +1 -1
package/example.html
CHANGED
|
@@ -16,6 +16,82 @@
|
|
|
16
16
|
<fig-header>
|
|
17
17
|
<h3>UI3 Components</h3>
|
|
18
18
|
</fig-header>
|
|
19
|
+
<br />
|
|
20
|
+
<fig-field direction="horizontal">
|
|
21
|
+
<label>Opacity</label>
|
|
22
|
+
<fig-slider type="opacity"
|
|
23
|
+
full
|
|
24
|
+
value="0.75"
|
|
25
|
+
color="#ff0000"
|
|
26
|
+
units="%"
|
|
27
|
+
text="true"></fig-slider>
|
|
28
|
+
<fig-button variant="ghost"
|
|
29
|
+
type="toggle"
|
|
30
|
+
icon="true">
|
|
31
|
+
<svg class="svg"
|
|
32
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
+
width="16"
|
|
34
|
+
height="16"
|
|
35
|
+
viewBox="0 0 16 16">
|
|
36
|
+
<path fill="currentColor"
|
|
37
|
+
fill-opacity="1"
|
|
38
|
+
fill-rule="evenodd"
|
|
39
|
+
stroke="none"
|
|
40
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
41
|
+
</path>
|
|
42
|
+
</svg>
|
|
43
|
+
</fig-button>
|
|
44
|
+
</fig-field>
|
|
45
|
+
<br />
|
|
46
|
+
<fig-field direction="horizontal">
|
|
47
|
+
<label>Blend mode</label>
|
|
48
|
+
<fig-dropdown full>
|
|
49
|
+
<option>One</option>
|
|
50
|
+
<option>Two</option>
|
|
51
|
+
</fig-dropdown>
|
|
52
|
+
<fig-button variant="ghost"
|
|
53
|
+
type="toggle"
|
|
54
|
+
icon="true">
|
|
55
|
+
<svg class="svg"
|
|
56
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
57
|
+
width="16"
|
|
58
|
+
height="16"
|
|
59
|
+
viewBox="0 0 16 16">
|
|
60
|
+
<path fill="currentColor"
|
|
61
|
+
fill-opacity="1"
|
|
62
|
+
fill-rule="evenodd"
|
|
63
|
+
stroke="none"
|
|
64
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
65
|
+
</path>
|
|
66
|
+
</svg>
|
|
67
|
+
</fig-button>
|
|
68
|
+
</fig-field>
|
|
69
|
+
<br />
|
|
70
|
+
<fig-field direction="horizontal">
|
|
71
|
+
<label>Description</label>
|
|
72
|
+
<fig-input-text multiline="true"
|
|
73
|
+
value=""
|
|
74
|
+
full
|
|
75
|
+
autoresize="true"
|
|
76
|
+
resizable="true"
|
|
77
|
+
placeholder="Anthropic API key"></fig-input-text>
|
|
78
|
+
<fig-button variant="ghost"
|
|
79
|
+
type="toggle"
|
|
80
|
+
icon="true">
|
|
81
|
+
<svg class="svg"
|
|
82
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
83
|
+
width="16"
|
|
84
|
+
height="16"
|
|
85
|
+
viewBox="0 0 16 16">
|
|
86
|
+
<path fill="currentColor"
|
|
87
|
+
fill-opacity="1"
|
|
88
|
+
fill-rule="evenodd"
|
|
89
|
+
stroke="none"
|
|
90
|
+
d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z">
|
|
91
|
+
</path>
|
|
92
|
+
</svg>
|
|
93
|
+
</fig-button>
|
|
94
|
+
</fig-field>
|
|
19
95
|
<fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
20
96
|
name="John Doe"></fig-avatar>
|
|
21
97
|
<fig-avatar size="large"
|
|
@@ -47,6 +123,68 @@
|
|
|
47
123
|
<fig-button>Primary</fig-button>
|
|
48
124
|
<fig-button variant="secondary">Secondary</fig-button>
|
|
49
125
|
<fig-button variant="ghost">Ghost</fig-button>
|
|
126
|
+
|
|
127
|
+
<fig-button-combo>
|
|
128
|
+
<fig-button>Primary</fig-button>
|
|
129
|
+
<fig-button icon="true"
|
|
130
|
+
type="select">
|
|
131
|
+
<svg width="24"
|
|
132
|
+
height="24"
|
|
133
|
+
viewBox="0 0 24 24"
|
|
134
|
+
fill="none"
|
|
135
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
136
|
+
<path fill-rule="evenodd"
|
|
137
|
+
clip-rule="evenodd"
|
|
138
|
+
d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
|
|
139
|
+
fill="currentColor"
|
|
140
|
+
fill-opacity="0.9" />
|
|
141
|
+
</svg>
|
|
142
|
+
<fig-dropdown>
|
|
143
|
+
<option>One</option>
|
|
144
|
+
<option>Two</option>
|
|
145
|
+
</fig-dropdown>
|
|
146
|
+
</fig-button>
|
|
147
|
+
</fig-button-combo>
|
|
148
|
+
<fig-button-combo>
|
|
149
|
+
<fig-button variant="secondary">Secondary</fig-button>
|
|
150
|
+
<fig-button variant="secondary"
|
|
151
|
+
icon="true"
|
|
152
|
+
type="select">
|
|
153
|
+
<svg width="24"
|
|
154
|
+
height="24"
|
|
155
|
+
viewBox="0 0 24 24"
|
|
156
|
+
fill="none"
|
|
157
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
158
|
+
<path fill-rule="evenodd"
|
|
159
|
+
clip-rule="evenodd"
|
|
160
|
+
d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
|
|
161
|
+
fill="currentColor"
|
|
162
|
+
fill-opacity="0.9" />
|
|
163
|
+
</svg>
|
|
164
|
+
<fig-dropdown>
|
|
165
|
+
<option>One</option>
|
|
166
|
+
<option>Two</option>
|
|
167
|
+
</fig-dropdown>
|
|
168
|
+
</fig-button>
|
|
169
|
+
</fig-button-combo>
|
|
170
|
+
<fig-button icon="true"
|
|
171
|
+
type="select">
|
|
172
|
+
<svg width="24"
|
|
173
|
+
height="24"
|
|
174
|
+
viewBox="0 0 24 24"
|
|
175
|
+
fill="none"
|
|
176
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
177
|
+
<path fill-rule="evenodd"
|
|
178
|
+
clip-rule="evenodd"
|
|
179
|
+
d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
|
|
180
|
+
fill="currentColor"
|
|
181
|
+
fill-opacity="0.9" />
|
|
182
|
+
</svg>
|
|
183
|
+
<fig-dropdown>
|
|
184
|
+
<option>One</option>
|
|
185
|
+
<option>Two</option>
|
|
186
|
+
</fig-dropdown>
|
|
187
|
+
</fig-button>
|
|
50
188
|
<fig-button type="select">
|
|
51
189
|
Select
|
|
52
190
|
<fig-dropdown>
|
package/fig.css
CHANGED
|
@@ -602,17 +602,22 @@ select {
|
|
|
602
602
|
padding-right: 1.5rem;
|
|
603
603
|
}
|
|
604
604
|
|
|
605
|
-
fig-
|
|
606
|
-
|
|
607
|
-
opacity: 0;
|
|
608
|
-
position: absolute;
|
|
609
|
-
inset: 0;
|
|
610
|
-
}
|
|
605
|
+
fig-dialog > *:not(dialog) {
|
|
606
|
+
display: none !important;
|
|
611
607
|
}
|
|
612
608
|
|
|
613
|
-
|
|
614
|
-
fig-dropdown
|
|
615
|
-
|
|
609
|
+
/* Dropdown */
|
|
610
|
+
fig-dropdown,
|
|
611
|
+
.fig-dropdown {
|
|
612
|
+
display: inline-flex;
|
|
613
|
+
position: relative;
|
|
614
|
+
|
|
615
|
+
& > *:not(select) {
|
|
616
|
+
display: none !important;
|
|
617
|
+
}
|
|
618
|
+
> select {
|
|
619
|
+
display: block;
|
|
620
|
+
}
|
|
616
621
|
}
|
|
617
622
|
|
|
618
623
|
/* Button */
|
|
@@ -705,10 +710,7 @@ fig-button {
|
|
|
705
710
|
padding: 0;
|
|
706
711
|
flex-grow: 0;
|
|
707
712
|
flex-shrink: 0;
|
|
708
|
-
|
|
709
|
-
&:hover {
|
|
710
|
-
background-color: var(--figma-color-bg-ghost-hover);
|
|
711
|
-
}
|
|
713
|
+
flex-basis: var(--spacer-4);
|
|
712
714
|
}
|
|
713
715
|
|
|
714
716
|
/* Upload */
|
|
@@ -1090,6 +1092,46 @@ fig-image {
|
|
|
1090
1092
|
}
|
|
1091
1093
|
}
|
|
1092
1094
|
|
|
1095
|
+
/* Combo button */
|
|
1096
|
+
.fig-button-combo,
|
|
1097
|
+
fig-button-combo,
|
|
1098
|
+
.fig-input-combo,
|
|
1099
|
+
fig-input-combo {
|
|
1100
|
+
display: inline-flex;
|
|
1101
|
+
flex-wrap: nowrap;
|
|
1102
|
+
align-items: center;
|
|
1103
|
+
gap: 0px;
|
|
1104
|
+
& > * {
|
|
1105
|
+
&:first-child,
|
|
1106
|
+
&:first-child > * {
|
|
1107
|
+
border-top-right-radius: 0;
|
|
1108
|
+
border-bottom-right-radius: 0;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
&:last-child,
|
|
1112
|
+
&:last-child > * {
|
|
1113
|
+
border-top-left-radius: 0;
|
|
1114
|
+
border-bottom-left-radius: 0;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
&:not(:last-child):not(:first-child),
|
|
1118
|
+
&:not(:last-child):not(:first-child) > * {
|
|
1119
|
+
border-radius: 0;
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
}
|
|
1123
|
+
.fig-button-combo,
|
|
1124
|
+
fig-button-combo {
|
|
1125
|
+
> *:not(:first-child) {
|
|
1126
|
+
border-left: 1px solid var(--figma-color-bg-brand-hover);
|
|
1127
|
+
margin-left: -1px;
|
|
1128
|
+
}
|
|
1129
|
+
> *[variant="secondary"]:not(:first-child) {
|
|
1130
|
+
border-left: transparent;
|
|
1131
|
+
margin-left: -1px;
|
|
1132
|
+
}
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1093
1135
|
/* Combo input */
|
|
1094
1136
|
.input-combo {
|
|
1095
1137
|
display: inline-flex;
|
|
@@ -1857,7 +1899,6 @@ fig-content,
|
|
|
1857
1899
|
fig-slider,
|
|
1858
1900
|
fig-switch,
|
|
1859
1901
|
fig-input-color,
|
|
1860
|
-
fig-input-text,
|
|
1861
1902
|
fig-checkbox,
|
|
1862
1903
|
fig-radio,
|
|
1863
1904
|
fig-tab,
|
|
@@ -1872,22 +1913,29 @@ fig-tabs {
|
|
|
1872
1913
|
}
|
|
1873
1914
|
}
|
|
1874
1915
|
|
|
1916
|
+
/* Text input */
|
|
1875
1917
|
fig-input-text {
|
|
1918
|
+
display: inline-flex;
|
|
1876
1919
|
user-select: all;
|
|
1877
1920
|
gap: 0;
|
|
1878
1921
|
|
|
1879
1922
|
&[multiline] {
|
|
1880
1923
|
display: block;
|
|
1881
1924
|
}
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1925
|
+
&[autoresize] input,
|
|
1926
|
+
&[autoresize] textarea {
|
|
1927
|
+
field-sizing: content;
|
|
1928
|
+
}
|
|
1929
|
+
&[resizable] input,
|
|
1930
|
+
&[resizable] textarea {
|
|
1931
|
+
resize: both;
|
|
1932
|
+
}
|
|
1933
|
+
&[resizable]:has(textarea[style*="width"]),
|
|
1934
|
+
&[resizable]:has(textarea[style*="height"]),
|
|
1935
|
+
&[resizable]:has(input[style*="width"]),
|
|
1936
|
+
&[resizable]:has(input[style*="height"]) {
|
|
1937
|
+
flex: unset;
|
|
1938
|
+
}
|
|
1891
1939
|
}
|
|
1892
1940
|
|
|
1893
1941
|
fig-checkbox,
|
|
@@ -1936,15 +1984,17 @@ vstack,
|
|
|
1936
1984
|
[vstack] {
|
|
1937
1985
|
display: flex;
|
|
1938
1986
|
flex-direction: column;
|
|
1939
|
-
gap:
|
|
1987
|
+
gap: var(--spacer-2);
|
|
1988
|
+
flex-wrap: wrap;
|
|
1940
1989
|
}
|
|
1941
1990
|
|
|
1942
1991
|
hstack,
|
|
1943
1992
|
.hstack,
|
|
1944
1993
|
[hstack] {
|
|
1945
1994
|
display: flex;
|
|
1946
|
-
gap:
|
|
1995
|
+
gap: var(--spacer-2);
|
|
1947
1996
|
align-items: start;
|
|
1997
|
+
flex-wrap: nowrap;
|
|
1948
1998
|
}
|
|
1949
1999
|
|
|
1950
2000
|
fig-input-text {
|
|
@@ -2035,7 +2085,7 @@ fig-field,
|
|
|
2035
2085
|
flex-direction: column;
|
|
2036
2086
|
gap: 0;
|
|
2037
2087
|
|
|
2038
|
-
& >
|
|
2088
|
+
& > [full] {
|
|
2039
2089
|
flex: 1;
|
|
2040
2090
|
}
|
|
2041
2091
|
|
package/package.json
CHANGED