@rogieking/figui3 1.0.62 → 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 +141 -0
- package/fig.css +79 -26
- package/package.json +1 -1
package/example.html
CHANGED
|
@@ -16,8 +16,87 @@
|
|
|
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>
|
|
97
|
+
<fig-avatar size="large"
|
|
98
|
+
src="https://avatars.githubusercontent.com/u/12345678?v=4"
|
|
99
|
+
name="John Doe"></fig-avatar>
|
|
21
100
|
<fig-avatar name="John Doe"></fig-avatar>
|
|
22
101
|
<fig-content>
|
|
23
102
|
<fig-tabs>
|
|
@@ -44,6 +123,68 @@
|
|
|
44
123
|
<fig-button>Primary</fig-button>
|
|
45
124
|
<fig-button variant="secondary">Secondary</fig-button>
|
|
46
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>
|
|
47
188
|
<fig-button type="select">
|
|
48
189
|
Select
|
|
49
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 */
|
|
@@ -887,6 +889,9 @@ fig-avatar,
|
|
|
887
889
|
&::after {
|
|
888
890
|
content: attr(initials);
|
|
889
891
|
}
|
|
892
|
+
&[size="large"] {
|
|
893
|
+
--size: 3rem;
|
|
894
|
+
}
|
|
890
895
|
}
|
|
891
896
|
|
|
892
897
|
/* Color input */
|
|
@@ -1087,6 +1092,46 @@ fig-image {
|
|
|
1087
1092
|
}
|
|
1088
1093
|
}
|
|
1089
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
|
+
|
|
1090
1135
|
/* Combo input */
|
|
1091
1136
|
.input-combo {
|
|
1092
1137
|
display: inline-flex;
|
|
@@ -1854,7 +1899,6 @@ fig-content,
|
|
|
1854
1899
|
fig-slider,
|
|
1855
1900
|
fig-switch,
|
|
1856
1901
|
fig-input-color,
|
|
1857
|
-
fig-input-text,
|
|
1858
1902
|
fig-checkbox,
|
|
1859
1903
|
fig-radio,
|
|
1860
1904
|
fig-tab,
|
|
@@ -1869,22 +1913,29 @@ fig-tabs {
|
|
|
1869
1913
|
}
|
|
1870
1914
|
}
|
|
1871
1915
|
|
|
1916
|
+
/* Text input */
|
|
1872
1917
|
fig-input-text {
|
|
1918
|
+
display: inline-flex;
|
|
1873
1919
|
user-select: all;
|
|
1874
1920
|
gap: 0;
|
|
1875
1921
|
|
|
1876
1922
|
&[multiline] {
|
|
1877
1923
|
display: block;
|
|
1878
1924
|
}
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
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
|
+
}
|
|
1888
1939
|
}
|
|
1889
1940
|
|
|
1890
1941
|
fig-checkbox,
|
|
@@ -1933,15 +1984,17 @@ vstack,
|
|
|
1933
1984
|
[vstack] {
|
|
1934
1985
|
display: flex;
|
|
1935
1986
|
flex-direction: column;
|
|
1936
|
-
gap:
|
|
1987
|
+
gap: var(--spacer-2);
|
|
1988
|
+
flex-wrap: wrap;
|
|
1937
1989
|
}
|
|
1938
1990
|
|
|
1939
1991
|
hstack,
|
|
1940
1992
|
.hstack,
|
|
1941
1993
|
[hstack] {
|
|
1942
1994
|
display: flex;
|
|
1943
|
-
gap:
|
|
1995
|
+
gap: var(--spacer-2);
|
|
1944
1996
|
align-items: start;
|
|
1997
|
+
flex-wrap: nowrap;
|
|
1945
1998
|
}
|
|
1946
1999
|
|
|
1947
2000
|
fig-input-text {
|
|
@@ -2032,7 +2085,7 @@ fig-field,
|
|
|
2032
2085
|
flex-direction: column;
|
|
2033
2086
|
gap: 0;
|
|
2034
2087
|
|
|
2035
|
-
& >
|
|
2088
|
+
& > [full] {
|
|
2036
2089
|
flex: 1;
|
|
2037
2090
|
}
|
|
2038
2091
|
|
package/package.json
CHANGED