figma-kit 0.0.0 → 1.0.0-beta.1

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 (7) hide show
  1. package/README.md +29 -1
  2. package/dist/figma-development-theme.css +365 -0
  3. package/dist/index.cjs +64 -0
  4. package/dist/index.d.ts +874 -0
  5. package/dist/index.mjs +9743 -0
  6. package/dist/styles.css +1451 -0
  7. package/package.json +22 -4
package/README.md CHANGED
@@ -1,4 +1,32 @@
1
1
  <div align="center">
2
2
  <h1>Figma Kit</h1>
3
- <h1>A set of React components for building Figma plugins. Coming soon.</h1>
3
+ <h3>A set of React components for building Figma plugins.</h3>
4
4
  </div>
5
+
6
+ ## Overview
7
+
8
+ Figma Kit is under active development and is expected to be published some time in Aug 2024.
9
+ The library attempts to replicate Figma's user interface look & feel with near-100% feature parity,
10
+ to get the UI engineering out of the way of building great plugins.
11
+
12
+ ### List of components:
13
+
14
+ - [x] Button
15
+ - [x] Icon Button
16
+ - [x] Input
17
+ - [x] Textarea
18
+ - [x] Value field
19
+ - [x] Select
20
+ - [x] Dropdown Menu
21
+ - [x] Context Menu
22
+ - [x] Tooltip
23
+ - [x] Switch
24
+ - [x] Slider
25
+ - [x] Dialog
26
+ - [x] AlertDialog
27
+ - [x] Popover
28
+ - [x] Text
29
+ - [x] Tabs
30
+ - [x] Checkbox & Radio
31
+ - [x] Segmented control
32
+ - [x] Collapsible
package/dist/figma-development-theme.css ADDED
@@ -0,0 +1,365 @@
1
+ /**
2
+ * FOR DEVELOPMENT PURPOSES ONLY.
3
+ * Use this file in non-figma plugin environments, e.g. Storybook to ensure base styles and color tokens are accessible to components.
4
+ * This file doesn't need to be imported into Plugin UI.
5
+ * https://www.figma.com/plugin-docs/css-variables/
6
+ */
7
+
8
+ body {
9
+ font-feature-settings:
10
+ 'liga' 1,
11
+ 'calt' 1;
12
+ }
13
+
14
+ :root,
15
+ .light,
16
+ .light-theme {
17
+ --figma-color-bg: #ffffff;
18
+ --figma-color-bg-brand: #0d99ff;
19
+ --figma-color-bg-brand-hover: #007be5;
20
+ --figma-color-bg-brand-pressed: #007be5;
21
+ --figma-color-bg-brand-secondary: #0768cf;
22
+ --figma-color-bg-brand-tertiary: #e5f4ff;
23
+ --figma-color-bg-component: #9747ff;
24
+ --figma-color-bg-component-hover: #8638e5;
25
+ --figma-color-bg-component-pressed: #8638e5;
26
+ --figma-color-bg-component-secondary: #7c2bda;
27
+ --figma-color-bg-component-tertiary: #f1e5ff;
28
+ --figma-color-bg-danger: #f24822;
29
+ --figma-color-bg-danger-hover: #dc3412;
30
+ --figma-color-bg-danger-pressed: #dc3412;
31
+ --figma-color-bg-danger-secondary: #bd2915;
32
+ --figma-color-bg-danger-tertiary: #ffe2e0;
33
+ --figma-color-bg-disabled: #d9d9d9;
34
+ --figma-color-bg-disabled-secondary: #b3b3b3;
35
+ --figma-color-bg-hover: #f5f5f5;
36
+ --figma-color-bg-inverse: #2c2c2c;
37
+ --figma-color-bg-onselected: #bde3ff;
38
+ --figma-color-bg-onselected-hover: #bde3ff;
39
+ --figma-color-bg-onselected-pressed: #bde3ff;
40
+ --figma-color-bg-pressed: #f5f5f5;
41
+ --figma-color-bg-secondary: #f5f5f5;
42
+ --figma-color-bg-selected: #e5f4ff;
43
+ --figma-color-bg-selected-hover: #bde3ff;
44
+ --figma-color-bg-selected-pressed: #bde3ff;
45
+ --figma-color-bg-selected-secondary: #f2f9ff;
46
+ --figma-color-bg-selected-strong: #0d99ff;
47
+ --figma-color-bg-selected-tertiary: #f2f9ff;
48
+ --figma-color-bg-success: #14ae5c;
49
+ --figma-color-bg-success-hover: #009951;
50
+ --figma-color-bg-success-pressed: #009951;
51
+ --figma-color-bg-success-secondary: #008043;
52
+ --figma-color-bg-success-tertiary: #cff7d3;
53
+ --figma-color-bg-tertiary: #e6e6e6;
54
+ --figma-color-bg-warning: #ffcd29;
55
+ --figma-color-bg-warning-hover: #ffc21a;
56
+ --figma-color-bg-warning-pressed: #ffc21a;
57
+ --figma-color-bg-warning-secondary: #fab815;
58
+ --figma-color-bg-warning-tertiary: #fff1c2;
59
+ --figma-color-border: #e6e6e6;
60
+ --figma-color-border-brand: #bde3ff;
61
+ --figma-color-border-brand-strong: #007be5;
62
+ --figma-color-border-component: #e4ccff;
63
+ --figma-color-border-component-hover: #9747ff;
64
+ --figma-color-border-component-strong: #8638e5;
65
+ --figma-color-border-danger: #ffc7c2;
66
+ --figma-color-border-danger-strong: #dc3412;
67
+ --figma-color-border-disabled: #e6e6e6;
68
+ --figma-color-border-disabled-strong: #0000004d;
69
+ --figma-color-border-onbrand: #007be5;
70
+ --figma-color-border-onbrand-strong: #ffffff;
71
+ --figma-color-border-oncomponent: #8638e5;
72
+ --figma-color-border-oncomponent-strong: #ffffff;
73
+ --figma-color-border-ondanger: #dc3412;
74
+ --figma-color-border-ondanger-strong: #ffffff;
75
+ --figma-color-border-onselected: #bde3ff;
76
+ --figma-color-border-onselected-strong: #000000e5;
77
+ --figma-color-border-onsuccess: #009951;
78
+ --figma-color-border-onsuccess-strong: #ffffff;
79
+ --figma-color-border-onwarning: #fab815;
80
+ --figma-color-border-onwarning-strong: #000000e5;
81
+ --figma-color-border-selected: #0d99ff;
82
+ --figma-color-border-selected-strong: #007be5;
83
+ --figma-color-border-strong: #2c2c2c;
84
+ --figma-color-border-success: #aff4c6;
85
+ --figma-color-border-success-strong: #009951;
86
+ --figma-color-border-warning: #ffe8a3;
87
+ --figma-color-border-warning-strong: #b86200;
88
+ --figma-color-icon: #000000e5;
89
+ --figma-color-icon-brand: #007be5;
90
+ --figma-color-icon-brand-pressed: #0768cf;
91
+ --figma-color-icon-brand-secondary: #80caff;
92
+ --figma-color-icon-brand-tertiary: #bde3ff;
93
+ --figma-color-icon-component: #8638e5;
94
+ --figma-color-icon-component-pressed: #7c2bda;
95
+ --figma-color-icon-component-secondary: #c5b2dc;
96
+ --figma-color-icon-component-tertiary: #c5b2dc;
97
+ --figma-color-icon-danger: #f24822;
98
+ --figma-color-icon-danger-hover: #bd2915;
99
+ --figma-color-icon-danger-pressed: #bd2915;
100
+ --figma-color-icon-danger-secondary: #f24822;
101
+ --figma-color-icon-danger-secondary-hover: #f24822;
102
+ --figma-color-icon-danger-tertiary: #f24822;
103
+ --figma-color-icon-disabled: #0000004d;
104
+ --figma-color-icon-hover: #000000e5;
105
+ --figma-color-icon-onbrand: #ffffff;
106
+ --figma-color-icon-onbrand-secondary: #ffffffcc;
107
+ --figma-color-icon-onbrand-tertiary: #ffffff66;
108
+ --figma-color-icon-oncomponent: #ffffff;
109
+ --figma-color-icon-oncomponent-secondary: #ffffffcc;
110
+ --figma-color-icon-oncomponent-tertiary: #ffffff66;
111
+ --figma-color-icon-ondanger: #ffffff;
112
+ --figma-color-icon-ondanger-secondary: #ffffffcc;
113
+ --figma-color-icon-ondanger-tertiary: #ffffff66;
114
+ --figma-color-icon-ondisabled: #ffffff;
115
+ --figma-color-icon-oninverse: #ffffffe5;
116
+ --figma-color-icon-onselected: #000000e5;
117
+ --figma-color-icon-onselected-secondary: #00000080;
118
+ --figma-color-icon-onselected-strong: #ffffff;
119
+ --figma-color-icon-onselected-tertiary: #0000004d;
120
+ --figma-color-icon-onsuccess: #ffffff;
121
+ --figma-color-icon-onsuccess-secondary: #ffffffcc;
122
+ --figma-color-icon-onsuccess-tertiary: #ffffff66;
123
+ --figma-color-icon-onwarning: #000000e5;
124
+ --figma-color-icon-onwarning-secondary: #00000080;
125
+ --figma-color-icon-onwarning-tertiary: #0000004d;
126
+ --figma-color-icon-pressed: #007be5;
127
+ --figma-color-icon-secondary: #00000080;
128
+ --figma-color-icon-secondary-hover: #000000e5;
129
+ --figma-color-icon-selected: #007be5;
130
+ --figma-color-icon-selected-secondary: #007be5;
131
+ --figma-color-icon-selected-tertiary: #007be5;
132
+ --figma-color-icon-success: #14ae5c;
133
+ --figma-color-icon-success-pressed: #008043;
134
+ --figma-color-icon-success-secondary: #14ae5c;
135
+ --figma-color-icon-success-tertiary: #14ae5c;
136
+ --figma-color-icon-tertiary: #0000004d;
137
+ --figma-color-icon-tertiary-hover: #000000e5;
138
+ --figma-color-icon-warning: #ffcd29;
139
+ --figma-color-icon-warning-pressed: #b86200;
140
+ --figma-color-icon-warning-secondary: #ffcd29;
141
+ --figma-color-icon-warning-tertiary: #ffcd29;
142
+ --figma-color-text: #000000e5;
143
+ --figma-color-text-brand: #007be5;
144
+ --figma-color-text-brand-secondary: #007be5;
145
+ --figma-color-text-brand-tertiary: #007be5;
146
+ --figma-color-text-component: #8638e5;
147
+ --figma-color-text-component-pressed: #7c2bda;
148
+ --figma-color-text-component-secondary: #c5b2dc;
149
+ --figma-color-text-component-tertiary: #c5b2dc;
150
+ --figma-color-text-danger: #dc3412;
151
+ --figma-color-text-danger-secondary: #dc3412;
152
+ --figma-color-text-danger-tertiary: #dc3412;
153
+ --figma-color-text-disabled: #0000004d;
154
+ --figma-color-text-hover: #000000e5;
155
+ --figma-color-text-onbrand: #ffffff;
156
+ --figma-color-text-onbrand-secondary: #ffffffcc;
157
+ --figma-color-text-onbrand-tertiary: #ffffff66;
158
+ --figma-color-text-oncomponent: #ffffff;
159
+ --figma-color-text-oncomponent-secondary: #ffffffcc;
160
+ --figma-color-text-oncomponent-tertiary: #ffffff66;
161
+ --figma-color-text-ondanger: #ffffff;
162
+ --figma-color-text-ondanger-secondary: #ffffffcc;
163
+ --figma-color-text-ondanger-tertiary: #ffffff66;
164
+ --figma-color-text-ondisabled: #ffffff;
165
+ --figma-color-text-oninverse: #ffffffe5;
166
+ --figma-color-text-onselected: #000000e5;
167
+ --figma-color-text-onselected-secondary: #00000080;
168
+ --figma-color-text-onselected-strong: #ffffff;
169
+ --figma-color-text-onselected-tertiary: #0000004d;
170
+ --figma-color-text-onsuccess: #ffffff;
171
+ --figma-color-text-onsuccess-secondary: #ffffffcc;
172
+ --figma-color-text-onsuccess-tertiary: #ffffff66;
173
+ --figma-color-text-onwarning: #000000e5;
174
+ --figma-color-text-onwarning-secondary: #00000080;
175
+ --figma-color-text-onwarning-tertiary: #0000004d;
176
+ --figma-color-text-secondary: #00000080;
177
+ --figma-color-text-secondary-hover: #000000e5;
178
+ --figma-color-text-selected: #007be5;
179
+ --figma-color-text-selected-secondary: #007be5;
180
+ --figma-color-text-selected-tertiary: #007be5;
181
+ --figma-color-text-success: #009951;
182
+ --figma-color-text-success-secondary: #009951;
183
+ --figma-color-text-success-tertiary: #009951;
184
+ --figma-color-text-tertiary: #0000004d;
185
+ --figma-color-text-tertiary-hover: #000000e5;
186
+ --figma-color-text-warning: #b86200;
187
+ --figma-color-text-warning-secondary: #b86200;
188
+ --figma-color-text-warning-tertiary: #b86200;
189
+ }
190
+
191
+ .dark,
192
+ .dark-theme {
193
+ --figma-color-bg: #2c2c2c;
194
+ --figma-color-bg-brand: #0c8ce9;
195
+ --figma-color-bg-brand-hover: #0a6dc2;
196
+ --figma-color-bg-brand-pressed: #0a6dc2;
197
+ --figma-color-bg-brand-secondary: #105cad;
198
+ --figma-color-bg-brand-tertiary: #394360;
199
+ --figma-color-bg-component: #8a38f5;
200
+ --figma-color-bg-component-hover: #7a2ed6;
201
+ --figma-color-bg-component-pressed: #7a2ed6;
202
+ --figma-color-bg-component-secondary: #652ca8;
203
+ --figma-color-bg-component-tertiary: #473956;
204
+ --figma-color-bg-danger: #e03e1a;
205
+ --figma-color-bg-danger-hover: #c4381c;
206
+ --figma-color-bg-danger-pressed: #c4381c;
207
+ --figma-color-bg-danger-secondary: #963323;
208
+ --figma-color-bg-danger-tertiary: #60332a;
209
+ --figma-color-bg-disabled: #757575;
210
+ --figma-color-bg-disabled-secondary: #b3b3b3;
211
+ --figma-color-bg-hover: #383838;
212
+ --figma-color-bg-inverse: #ffffff;
213
+ --figma-color-bg-onselected: #667799;
214
+ --figma-color-bg-onselected-hover: #667799;
215
+ --figma-color-bg-onselected-pressed: #667799;
216
+ --figma-color-bg-pressed: #383838;
217
+ --figma-color-bg-secondary: #383838;
218
+ --figma-color-bg-selected: #4a5878;
219
+ --figma-color-bg-selected-hover: #536383;
220
+ --figma-color-bg-selected-pressed: #536383;
221
+ --figma-color-bg-selected-secondary: #394360;
222
+ --figma-color-bg-selected-strong: #0c8ce9;
223
+ --figma-color-bg-selected-tertiary: #394360;
224
+ --figma-color-bg-success: #198f51;
225
+ --figma-color-bg-success-hover: #078348;
226
+ --figma-color-bg-success-pressed: #078348;
227
+ --figma-color-bg-success-secondary: #0a5c35;
228
+ --figma-color-bg-success-tertiary: #476656;
229
+ --figma-color-bg-tertiary: #444444;
230
+ --figma-color-bg-warning: #f3c11b;
231
+ --figma-color-bg-warning-hover: #f2b50d;
232
+ --figma-color-bg-warning-pressed: #f2b50d;
233
+ --figma-color-bg-warning-secondary: #e4a711;
234
+ --figma-color-bg-warning-tertiary: #5c4100;
235
+ --figma-color-border: #444444;
236
+ --figma-color-border-brand: #105cad;
237
+ --figma-color-border-brand-strong: #7cc4f8;
238
+ --figma-color-border-component: #652ca8;
239
+ --figma-color-border-component-hover: #8a38f5;
240
+ --figma-color-border-component-strong: #d6b6fb;
241
+ --figma-color-border-danger: #963323;
242
+ --figma-color-border-danger-strong: #fca397;
243
+ --figma-color-border-disabled: #444444;
244
+ --figma-color-border-disabled-strong: #ffffff66;
245
+ --figma-color-border-onbrand: #0a6dc2;
246
+ --figma-color-border-onbrand-strong: #ffffff;
247
+ --figma-color-border-oncomponent: #7a2ed6;
248
+ --figma-color-border-oncomponent-strong: #ffffff;
249
+ --figma-color-border-ondanger: #c4381c;
250
+ --figma-color-border-ondanger-strong: #ffffff;
251
+ --figma-color-border-onselected: #667799;
252
+ --figma-color-border-onselected-strong: #ffffffe5;
253
+ --figma-color-border-onsuccess: #078348;
254
+ --figma-color-border-onsuccess-strong: #ffffff;
255
+ --figma-color-border-onwarning: #e4a711;
256
+ --figma-color-border-onwarning-strong: #000000e5;
257
+ --figma-color-border-selected: #0c8ce9;
258
+ --figma-color-border-selected-strong: #7cc4f8;
259
+ --figma-color-border-strong: #ffffffe5;
260
+ --figma-color-border-success: #0a5c35;
261
+ --figma-color-border-success-strong: #79d297;
262
+ --figma-color-border-warning: #925711;
263
+ --figma-color-border-warning-strong: #f7d15f;
264
+ --figma-color-icon: #ffffff;
265
+ --figma-color-icon-brand: #7cc4f8;
266
+ --figma-color-icon-brand-pressed: #0c8ce9;
267
+ --figma-color-icon-brand-secondary: #0a6dc2;
268
+ --figma-color-icon-brand-tertiary: #394360;
269
+ --figma-color-icon-component: #d1a8ff;
270
+ --figma-color-icon-component-pressed: #d6b6fb;
271
+ --figma-color-icon-component-secondary: #7f699b;
272
+ --figma-color-icon-component-tertiary: #7f699b;
273
+ --figma-color-icon-danger: #e03e1a;
274
+ --figma-color-icon-danger-hover: #fbbcb6;
275
+ --figma-color-icon-danger-pressed: #fbbcb6;
276
+ --figma-color-icon-danger-secondary: #e03e1a;
277
+ --figma-color-icon-danger-secondary-hover: #e03e1a;
278
+ --figma-color-icon-danger-tertiary: #e03e1a;
279
+ --figma-color-icon-disabled: #ffffff66;
280
+ --figma-color-icon-hover: #ffffff;
281
+ --figma-color-icon-onbrand: #ffffff;
282
+ --figma-color-icon-onbrand-secondary: #ffffffcc;
283
+ --figma-color-icon-onbrand-tertiary: #ffffff66;
284
+ --figma-color-icon-oncomponent: #ffffff;
285
+ --figma-color-icon-oncomponent-secondary: #ffffffcc;
286
+ --figma-color-icon-oncomponent-tertiary: #ffffff66;
287
+ --figma-color-icon-ondanger: #ffffff;
288
+ --figma-color-icon-ondanger-secondary: #ffffffcc;
289
+ --figma-color-icon-ondanger-tertiary: #ffffff66;
290
+ --figma-color-icon-ondisabled: #2c2c2c;
291
+ --figma-color-icon-oninverse: #000000e5;
292
+ --figma-color-icon-onselected: #ffffff;
293
+ --figma-color-icon-onselected-secondary: #ffffffb2;
294
+ --figma-color-icon-onselected-strong: #ffffff;
295
+ --figma-color-icon-onselected-tertiary: #ffffff66;
296
+ --figma-color-icon-onsuccess: #ffffff;
297
+ --figma-color-icon-onsuccess-secondary: #ffffffcc;
298
+ --figma-color-icon-onsuccess-tertiary: #ffffff66;
299
+ --figma-color-icon-onwarning: #000000e5;
300
+ --figma-color-icon-onwarning-secondary: #00000080;
301
+ --figma-color-icon-onwarning-tertiary: #0000004d;
302
+ --figma-color-icon-pressed: #0a6dc2;
303
+ --figma-color-icon-secondary: #ffffffb2;
304
+ --figma-color-icon-secondary-hover: #ffffff;
305
+ --figma-color-icon-selected: #7cc4f8;
306
+ --figma-color-icon-selected-secondary: #7cc4f8;
307
+ --figma-color-icon-selected-tertiary: #7cc4f8;
308
+ --figma-color-icon-success: #198f51;
309
+ --figma-color-icon-success-pressed: #a1e8b9;
310
+ --figma-color-icon-success-secondary: #198f51;
311
+ --figma-color-icon-success-tertiary: #198f51;
312
+ --figma-color-icon-tertiary: #ffffff66;
313
+ --figma-color-icon-tertiary-hover: #ffffff;
314
+ --figma-color-icon-warning: #f3c11b;
315
+ --figma-color-icon-warning-pressed: #f7d15f;
316
+ --figma-color-icon-warning-secondary: #f3c11b;
317
+ --figma-color-icon-warning-tertiary: #f3c11b;
318
+ --figma-color-text: #ffffff;
319
+ --figma-color-text-brand: #7cc4f8;
320
+ --figma-color-text-brand-secondary: #7cc4f8;
321
+ --figma-color-text-brand-tertiary: #7cc4f8;
322
+ --figma-color-text-component: #d1a8ff;
323
+ --figma-color-text-component-pressed: #d6b6fb;
324
+ --figma-color-text-component-secondary: #7f699b;
325
+ --figma-color-text-component-tertiary: #7f699b;
326
+ --figma-color-text-danger: #fca397;
327
+ --figma-color-text-danger-secondary: #fca397;
328
+ --figma-color-text-danger-tertiary: #fca397;
329
+ --figma-color-text-disabled: #ffffff66;
330
+ --figma-color-text-hover: #ffffff;
331
+ --figma-color-text-onbrand: #ffffff;
332
+ --figma-color-text-onbrand-secondary: #ffffffcc;
333
+ --figma-color-text-onbrand-tertiary: #ffffff66;
334
+ --figma-color-text-oncomponent: #ffffff;
335
+ --figma-color-text-oncomponent-secondary: #ffffffcc;
336
+ --figma-color-text-oncomponent-tertiary: #ffffff66;
337
+ --figma-color-text-ondanger: #ffffff;
338
+ --figma-color-text-ondanger-secondary: #ffffffcc;
339
+ --figma-color-text-ondanger-tertiary: #ffffff66;
340
+ --figma-color-text-ondisabled: #2c2c2c;
341
+ --figma-color-text-oninverse: #000000e5;
342
+ --figma-color-text-onselected: #ffffffe5;
343
+ --figma-color-text-onselected-secondary: #ffffffb2;
344
+ --figma-color-text-onselected-strong: #ffffff;
345
+ --figma-color-text-onselected-tertiary: #ffffff66;
346
+ --figma-color-text-onsuccess: #ffffff;
347
+ --figma-color-text-onsuccess-secondary: #ffffffcc;
348
+ --figma-color-text-onsuccess-tertiary: #ffffff66;
349
+ --figma-color-text-onwarning: #000000e5;
350
+ --figma-color-text-onwarning-secondary: #00000080;
351
+ --figma-color-text-onwarning-tertiary: #0000004d;
352
+ --figma-color-text-secondary: #ffffffb2;
353
+ --figma-color-text-secondary-hover: #ffffff;
354
+ --figma-color-text-selected: #7cc4f8;
355
+ --figma-color-text-selected-secondary: #7cc4f8;
356
+ --figma-color-text-selected-tertiary: #7cc4f8;
357
+ --figma-color-text-success: #79d297;
358
+ --figma-color-text-success-secondary: #79d297;
359
+ --figma-color-text-success-tertiary: #79d297;
360
+ --figma-color-text-tertiary: #ffffff66;
361
+ --figma-color-text-tertiary-hover: #ffffff;
362
+ --figma-color-text-warning: #f7d15f;
363
+ --figma-color-text-warning-secondary: #f7d15f;
364
+ --figma-color-text-warning-tertiary: #f7d15f;
365
+ }