figma-kit 1.0.0-beta.5 → 1.0.0-beta.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.
package/README.md CHANGED
@@ -1,32 +1,49 @@
1
1
  <div align="center">
2
- <h1>Figma Kit</h1>
2
+ <a href="https://storybook.figma-kit.dev" target="_blank">
3
+ <picture>
4
+ <source media="(prefers-color-scheme: dark)" srcset="media/github-banner-dark.png">
5
+ <source media="(prefers-color-scheme: light)" srcset="media/github-banner-light.png">
6
+ <img src="media/github-banner-light.png" width="400" height="243" alt="Figma kit logo" />
7
+ </picture>
8
+ </a>
3
9
  <h3>A set of React components for building Figma plugins.</h3>
4
10
  </div>
5
11
 
6
- ## Overview
12
+ ### Overview
7
13
 
8
- Figma Kit is under active development and is expected to be published some time in Aug 2024.
14
+ Figma Kit is currently in beta and is expected to be finalized some time in Aug 2024.
9
15
  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.
16
+ to get the UI engineering out of the way of building plugins.
11
17
 
12
- ### List of components:
18
+ ### Getting started
13
19
 
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
20
+ ```bash
21
+ npm install figma-kit@beta
22
+ ```
23
+
24
+ ```tsx
25
+ import {
26
+ Button,
27
+ IconButton,
28
+ Text,
29
+ Flex,
30
+ Input,
31
+ Textarea,
32
+ ValueField,
33
+ Tabs,
34
+ Popover,
35
+ SegmentedControl,
36
+ Checkbox,
37
+ RadioGroup,
38
+ Dialog,
39
+ Select,
40
+ ContextMenu,
41
+ Slider,
42
+ Switch,
43
+ Collapsible
44
+ } from 'figma-kit'
45
+ ```
46
+
47
+ ### Documentation
48
+
49
+ The documentation for the library is on its way. Meanwhile, feel free to check out the [Storybook](https://storybook.figma-kit.dev) for available components and functionality.
@@ -4,179 +4,186 @@ export default {
4
4
  current: 'currentColor',
5
5
  inherit: 'inherit',
6
6
  transparent: 'transparent',
7
-
8
- bg: 'var(--figma-color-bg)',
9
- 'bg-brand': 'var(--figma-color-bg-brand)',
10
- 'bg-brand-hover': 'var(--figma-color-bg-brand-hover)',
11
- 'bg-brand-pressed': 'var(--figma-color-bg-brand-pressed)',
12
- 'bg-brand-secondary': 'var(--figma-color-bg-brand-secondary)',
13
- 'bg-brand-tertiary': 'var(--figma-color-bg-brand-tertiary)',
14
- 'bg-component': 'var(--figma-color-bg-component)',
15
- 'bg-component-hover': 'var(--figma-color-bg-component-hover)',
16
- 'bg-component-pressed': 'var(--figma-color-bg-component-pressed)',
17
- 'bg-component-secondary': 'var(--figma-color-bg-component-secondary)',
18
- 'bg-component-tertiary': 'var(--figma-color-bg-component-tertiary)',
19
- 'bg-danger': 'var(--figma-color-bg-danger)',
20
- 'bg-danger-hover': 'var(--figma-color-bg-danger-hover)',
21
- 'bg-danger-pressed': 'var(--figma-color-bg-danger-pressed)',
22
- 'bg-danger-secondary': 'var(--figma-color-bg-danger-secondary)',
23
- 'bg-danger-tertiary': 'var(--figma-color-bg-danger-tertiary)',
24
- 'bg-disabled': 'var(--figma-color-bg-disabled)',
25
- 'bg-disabled-secondary': 'var(--figma-color-bg-disabled-secondary)',
26
- 'bg-hover': 'var(--figma-color-bg-hover)',
27
- 'bg-inverse': 'var(--figma-color-bg-inverse)',
28
- 'bg-onselected': 'var(--figma-color-bg-onselected)',
29
- 'bg-onselected-hover': 'var(--figma-color-bg-onselected-hover)',
30
- 'bg-onselected-pressed': 'var(--figma-color-bg-onselected-pressed)',
31
- 'bg-pressed': 'var(--figma-color-bg-pressed)',
32
- 'bg-secondary': 'var(--figma-color-bg-secondary)',
33
- 'bg-selected': 'var(--figma-color-bg-selected)',
34
- 'bg-selected-hover': 'var(--figma-color-bg-selected-hover)',
35
- 'bg-selected-pressed': 'var(--figma-color-bg-selected-pressed)',
36
- 'bg-selected-secondary': 'var(--figma-color-bg-selected-secondary)',
37
- 'bg-selected-strong': 'var(--figma-color-bg-selected-strong)',
38
- 'bg-selected-tertiary': 'var(--figma-color-bg-selected-tertiary)',
39
- 'bg-success': 'var(--figma-color-bg-success)',
40
- 'bg-success-hover': 'var(--figma-color-bg-success-hover)',
41
- 'bg-success-pressed': 'var(--figma-color-bg-success-pressed)',
42
- 'bg-success-secondary': 'var(--figma-color-bg-success-secondary)',
43
- 'bg-success-tertiary': 'var(--figma-color-bg-success-tertiary)',
44
- 'bg-tertiary': 'var(--figma-color-bg-tertiary)',
45
- 'bg-warning': 'var(--figma-color-bg-warning)',
46
- 'bg-warning-hover': 'var(--figma-color-bg-warning-hover)',
47
- 'bg-warning-pressed': 'var(--figma-color-bg-warning-pressed)',
48
- 'bg-warning-secondary': 'var(--figma-color-bg-warning-secondary)',
49
- 'bg-warning-tertiary': 'var(--figma-color-bg-warning-tertiary)',
50
- border: 'var(--figma-color-border)',
51
- 'border-brand': 'var(--figma-color-border-brand)',
52
- 'border-brand-strong': 'var(--figma-color-border-brand-strong)',
53
- 'border-component': 'var(--figma-color-border-component)',
54
- 'border-component-hover': 'var(--figma-color-border-component-hover)',
55
- 'border-component-strong': 'var(--figma-color-border-component-strong)',
56
- 'border-danger': 'var(--figma-color-border-danger)',
57
- 'border-danger-strong': 'var(--figma-color-border-danger-strong)',
58
- 'border-disabled': 'var(--figma-color-border-disabled)',
59
- 'border-disabled-strong': 'var(--figma-color-border-disabled-strong)',
60
- 'border-onbrand': 'var(--figma-color-border-onbrand)',
61
- 'border-onbrand-strong': 'var(--figma-color-border-onbrand-strong)',
62
- 'border-oncomponent': 'var(--figma-color-border-oncomponent)',
63
- 'border-oncomponent-strong': 'var(--figma-color-border-oncomponent-strong)',
64
- 'border-ondanger': 'var(--figma-color-border-ondanger)',
65
- 'border-ondanger-strong': 'var(--figma-color-border-ondanger-strong)',
66
- 'border-onselected': 'var(--figma-color-border-onselected)',
67
- 'border-onselected-strong': 'var(--figma-color-border-onselected-strong)',
68
- 'border-onsuccess': 'var(--figma-color-border-onsuccess)',
69
- 'border-onsuccess-strong': 'var(--figma-color-border-onsuccess-strong)',
70
- 'border-onwarning': 'var(--figma-color-border-onwarning)',
71
- 'border-onwarning-strong': 'var(--figma-color-border-onwarning-strong)',
72
- 'border-selected': 'var(--figma-color-border-selected)',
73
- 'border-selected-strong': 'var(--figma-color-border-selected-strong)',
74
- 'border-strong': 'var(--figma-color-border-strong)',
75
- 'border-success': 'var(--figma-color-border-success)',
76
- 'border-success-strong': 'var(--figma-color-border-success-strong)',
77
- 'border-warning': 'var(--figma-color-border-warning)',
78
- 'border-warning-strong': 'var(--figma-color-border-warning-strong)',
79
- icon: 'var(--figma-color-icon)',
80
- 'icon-brand': 'var(--figma-color-icon-brand)',
81
- 'icon-brand-pressed': 'var(--figma-color-icon-brand-pressed)',
82
- 'icon-brand-secondary': 'var(--figma-color-icon-brand-secondary)',
83
- 'icon-brand-tertiary': 'var(--figma-color-icon-brand-tertiary)',
84
- 'icon-component': 'var(--figma-color-icon-component)',
85
- 'icon-component-pressed': 'var(--figma-color-icon-component-pressed)',
86
- 'icon-component-secondary': 'var(--figma-color-icon-component-secondary)',
87
- 'icon-component-tertiary': 'var(--figma-color-icon-component-tertiary)',
88
- 'icon-danger': 'var(--figma-color-icon-danger)',
89
- 'icon-danger-hover': 'var(--figma-color-icon-danger-hover)',
90
- 'icon-danger-pressed': 'var(--figma-color-icon-danger-pressed)',
91
- 'icon-danger-secondary': 'var(--figma-color-icon-danger-secondary)',
92
- 'icon-danger-secondary-hover': 'var(--figma-color-icon-danger-secondary-hover)',
93
- 'icon-danger-tertiary': 'var(--figma-color-icon-danger-tertiary)',
94
- 'icon-disabled': 'var(--figma-color-icon-disabled)',
95
- 'icon-hover': 'var(--figma-color-icon-hover)',
96
- 'icon-onbrand': 'var(--figma-color-icon-onbrand)',
97
- 'icon-onbrand-secondary': 'var(--figma-color-icon-onbrand-secondary)',
98
- 'icon-onbrand-tertiary': 'var(--figma-color-icon-onbrand-tertiary)',
99
- 'icon-oncomponent': 'var(--figma-color-icon-oncomponent)',
100
- 'icon-oncomponent-secondary': 'var(--figma-color-icon-oncomponent-secondary)',
101
- 'icon-oncomponent-tertiary': 'var(--figma-color-icon-oncomponent-tertiary)',
102
- 'icon-ondanger': 'var(--figma-color-icon-ondanger)',
103
- 'icon-ondanger-secondary': 'var(--figma-color-icon-ondanger-secondary)',
104
- 'icon-ondanger-tertiary': 'var(--figma-color-icon-ondanger-tertiary)',
105
- 'icon-ondisabled': 'var(--figma-color-icon-ondisabled)',
106
- 'icon-oninverse': 'var(--figma-color-icon-oninverse)',
107
- 'icon-onselected': 'var(--figma-color-icon-onselected)',
108
- 'icon-onselected-secondary': 'var(--figma-color-icon-onselected-secondary)',
109
- 'icon-onselected-strong': 'var(--figma-color-icon-onselected-strong)',
110
- 'icon-onselected-tertiary': 'var(--figma-color-icon-onselected-tertiary)',
111
- 'icon-onsuccess': 'var(--figma-color-icon-onsuccess)',
112
- 'icon-onsuccess-secondary': 'var(--figma-color-icon-onsuccess-secondary)',
113
- 'icon-onsuccess-tertiary': 'var(--figma-color-icon-onsuccess-tertiary)',
114
- 'icon-onwarning': 'var(--figma-color-icon-onwarning)',
115
- 'icon-onwarning-secondary': 'var(--figma-color-icon-onwarning-secondary)',
116
- 'icon-onwarning-tertiary': 'var(--figma-color-icon-onwarning-tertiary)',
117
- 'icon-pressed': 'var(--figma-color-icon-pressed)',
118
- 'icon-secondary': 'var(--figma-color-icon-secondary)',
119
- 'icon-secondary-hover': 'var(--figma-color-icon-secondary-hover)',
120
- 'icon-selected': 'var(--figma-color-icon-selected)',
121
- 'icon-selected-secondary': 'var(--figma-color-icon-selected-secondary)',
122
- 'icon-selected-tertiary': 'var(--figma-color-icon-selected-tertiary)',
123
- 'icon-success': 'var(--figma-color-icon-success)',
124
- 'icon-success-pressed': 'var(--figma-color-icon-success-pressed)',
125
- 'icon-success-secondary': 'var(--figma-color-icon-success-secondary)',
126
- 'icon-success-tertiary': 'var(--figma-color-icon-success-tertiary)',
127
- 'icon-tertiary': 'var(--figma-color-icon-tertiary)',
128
- 'icon-tertiary-hover': 'var(--figma-color-icon-tertiary-hover)',
129
- 'icon-warning': 'var(--figma-color-icon-warning)',
130
- 'icon-warning-pressed': 'var(--figma-color-icon-warning-pressed)',
131
- 'icon-warning-secondary': 'var(--figma-color-icon-warning-secondary)',
132
- 'icon-warning-tertiary': 'var(--figma-color-icon-warning-tertiary)',
133
- text: 'var(--figma-color-text)',
134
- 'text-brand': 'var(--figma-color-text-brand)',
135
- 'text-brand-secondary': 'var(--figma-color-text-brand-secondary)',
136
- 'text-brand-tertiary': 'var(--figma-color-text-brand-tertiary)',
137
- 'text-component': 'var(--figma-color-text-component)',
138
- 'text-component-pressed': 'var(--figma-color-text-component-pressed)',
139
- 'text-component-secondary': 'var(--figma-color-text-component-secondary)',
140
- 'text-component-tertiary': 'var(--figma-color-text-component-tertiary)',
141
- 'text-danger': 'var(--figma-color-text-danger)',
142
- 'text-danger-secondary': 'var(--figma-color-text-danger-secondary)',
143
- 'text-danger-tertiary': 'var(--figma-color-text-danger-tertiary)',
144
- 'text-disabled': 'var(--figma-color-text-disabled)',
145
- 'text-hover': 'var(--figma-color-text-hover)',
146
- 'text-onbrand': 'var(--figma-color-text-onbrand)',
147
- 'text-onbrand-secondary': 'var(--figma-color-text-onbrand-secondary)',
148
- 'text-onbrand-tertiary': 'var(--figma-color-text-onbrand-tertiary)',
149
- 'text-oncomponent': 'var(--figma-color-text-oncomponent)',
150
- 'text-oncomponent-secondary': 'var(--figma-color-text-oncomponent-secondary)',
151
- 'text-oncomponent-tertiary': 'var(--figma-color-text-oncomponent-tertiary)',
152
- 'text-ondanger': 'var(--figma-color-text-ondanger)',
153
- 'text-ondanger-secondary': 'var(--figma-color-text-ondanger-secondary)',
154
- 'text-ondanger-tertiary': 'var(--figma-color-text-ondanger-tertiary)',
155
- 'text-ondisabled': 'var(--figma-color-text-ondisabled)',
156
- 'text-oninverse': 'var(--figma-color-text-oninverse)',
157
- 'text-onselected': 'var(--figma-color-text-onselected)',
158
- 'text-onselected-secondary': 'var(--figma-color-text-onselected-secondary)',
159
- 'text-onselected-strong': 'var(--figma-color-text-onselected-strong)',
160
- 'text-onselected-tertiary': 'var(--figma-color-text-onselected-tertiary)',
161
- 'text-onsuccess': 'var(--figma-color-text-onsuccess)',
162
- 'text-onsuccess-secondary': 'var(--figma-color-text-onsuccess-secondary)',
163
- 'text-onsuccess-tertiary': 'var(--figma-color-text-onsuccess-tertiary)',
164
- 'text-onwarning': 'var(--figma-color-text-onwarning)',
165
- 'text-onwarning-secondary': 'var(--figma-color-text-onwarning-secondary)',
166
- 'text-onwarning-tertiary': 'var(--figma-color-text-onwarning-tertiary)',
167
- 'text-secondary': 'var(--figma-color-text-secondary)',
168
- 'text-secondary-hover': 'var(--figma-color-text-secondary-hover)',
169
- 'text-selected': 'var(--figma-color-text-selected)',
170
- 'text-selected-secondary': 'var(--figma-color-text-selected-secondary)',
171
- 'text-selected-tertiary': 'var(--figma-color-text-selected-tertiary)',
172
- 'text-success': 'var(--figma-color-text-success)',
173
- 'text-success-secondary': 'var(--figma-color-text-success-secondary)',
174
- 'text-success-tertiary': 'var(--figma-color-text-success-tertiary)',
175
- 'text-tertiary': 'var(--figma-color-text-tertiary)',
176
- 'text-tertiary-hover': 'var(--figma-color-text-tertiary-hover)',
177
- 'text-warning': 'var(--figma-color-text-warning)',
178
- 'text-warning-secondary': 'var(--figma-color-text-warning-secondary)',
179
- 'text-warning-tertiary': 'var(--figma-color-text-warning-tertiary)',
7
+ bg: {
8
+ DEFAULT: 'var(--figma-color-bg)',
9
+ brand: 'var(--figma-color-bg-brand)',
10
+ 'brand-hover': 'var(--figma-color-bg-brand-hover)',
11
+ 'brand-pressed': 'var(--figma-color-bg-brand-pressed)',
12
+ 'brand-secondary': 'var(--figma-color-bg-brand-secondary)',
13
+ 'brand-tertiary': 'var(--figma-color-bg-brand-tertiary)',
14
+ component: 'var(--figma-color-bg-component)',
15
+ 'component-hover': 'var(--figma-color-bg-component-hover)',
16
+ 'component-pressed': 'var(--figma-color-bg-component-pressed)',
17
+ 'component-secondary': 'var(--figma-color-bg-component-secondary)',
18
+ 'component-tertiary': 'var(--figma-color-bg-component-tertiary)',
19
+ danger: 'var(--figma-color-bg-danger)',
20
+ 'danger-hover': 'var(--figma-color-bg-danger-hover)',
21
+ 'danger-pressed': 'var(--figma-color-bg-danger-pressed)',
22
+ 'danger-secondary': 'var(--figma-color-bg-danger-secondary)',
23
+ 'danger-tertiary': 'var(--figma-color-bg-danger-tertiary)',
24
+ disabled: 'var(--figma-color-bg-disabled)',
25
+ 'disabled-secondary': 'var(--figma-color-bg-disabled-secondary)',
26
+ hover: 'var(--figma-color-bg-hover)',
27
+ inverse: 'var(--figma-color-bg-inverse)',
28
+ onselected: 'var(--figma-color-bg-onselected)',
29
+ 'onselected-hover': 'var(--figma-color-bg-onselected-hover)',
30
+ 'onselected-pressed': 'var(--figma-color-bg-onselected-pressed)',
31
+ pressed: 'var(--figma-color-bg-pressed)',
32
+ secondary: 'var(--figma-color-bg-secondary)',
33
+ selected: 'var(--figma-color-bg-selected)',
34
+ 'selected-hover': 'var(--figma-color-bg-selected-hover)',
35
+ 'selected-pressed': 'var(--figma-color-bg-selected-pressed)',
36
+ 'selected-secondary': 'var(--figma-color-bg-selected-secondary)',
37
+ 'selected-strong': 'var(--figma-color-bg-selected-strong)',
38
+ 'selected-tertiary': 'var(--figma-color-bg-selected-tertiary)',
39
+ success: 'var(--figma-color-bg-success)',
40
+ 'success-hover': 'var(--figma-color-bg-success-hover)',
41
+ 'success-pressed': 'var(--figma-color-bg-success-pressed)',
42
+ 'success-secondary': 'var(--figma-color-bg-success-secondary)',
43
+ 'success-tertiary': 'var(--figma-color-bg-success-tertiary)',
44
+ tertiary: 'var(--figma-color-bg-tertiary)',
45
+ warning: 'var(--figma-color-bg-warning)',
46
+ 'warning-hover': 'var(--figma-color-bg-warning-hover)',
47
+ 'warning-pressed': 'var(--figma-color-bg-warning-pressed)',
48
+ 'warning-secondary': 'var(--figma-color-bg-warning-secondary)',
49
+ 'warning-tertiary': 'var(--figma-color-bg-warning-tertiary)',
50
+ },
51
+ border: {
52
+ DEFAULT: 'var(--figma-color-border)',
53
+ brand: 'var(--figma-color-border-brand)',
54
+ 'brand-strong': 'var(--figma-color-border-brand-strong)',
55
+ component: 'var(--figma-color-border-component)',
56
+ 'component-hover': 'var(--figma-color-border-component-hover)',
57
+ 'component-strong': 'var(--figma-color-border-component-strong)',
58
+ danger: 'var(--figma-color-border-danger)',
59
+ 'danger-strong': 'var(--figma-color-border-danger-strong)',
60
+ disabled: 'var(--figma-color-border-disabled)',
61
+ 'disabled-strong': 'var(--figma-color-border-disabled-strong)',
62
+ onbrand: 'var(--figma-color-border-onbrand)',
63
+ 'onbrand-strong': 'var(--figma-color-border-onbrand-strong)',
64
+ oncomponent: 'var(--figma-color-border-oncomponent)',
65
+ 'oncomponent-strong': 'var(--figma-color-border-oncomponent-strong)',
66
+ ondanger: 'var(--figma-color-border-ondanger)',
67
+ 'ondanger-strong': 'var(--figma-color-border-ondanger-strong)',
68
+ onselected: 'var(--figma-color-border-onselected)',
69
+ 'onselected-strong': 'var(--figma-color-border-onselected-strong)',
70
+ onsuccess: 'var(--figma-color-border-onsuccess)',
71
+ 'onsuccess-strong': 'var(--figma-color-border-onsuccess-strong)',
72
+ onwarning: 'var(--figma-color-border-onwarning)',
73
+ 'onwarning-strong': 'var(--figma-color-border-onwarning-strong)',
74
+ selected: 'var(--figma-color-border-selected)',
75
+ 'selected-strong': 'var(--figma-color-border-selected-strong)',
76
+ strong: 'var(--figma-color-border-strong)',
77
+ success: 'var(--figma-color-border-success)',
78
+ 'success-strong': 'var(--figma-color-border-success-strong)',
79
+ warning: 'var(--figma-color-border-warning)',
80
+ 'warning-strong': 'var(--figma-color-border-warning-strong)',
81
+ },
82
+ icon: {
83
+ DEFAULT: 'var(--figma-color-icon)',
84
+ brand: 'var(--figma-color-icon-brand)',
85
+ 'brand-pressed': 'var(--figma-color-icon-brand-pressed)',
86
+ 'brand-secondary': 'var(--figma-color-icon-brand-secondary)',
87
+ 'brand-tertiary': 'var(--figma-color-icon-brand-tertiary)',
88
+ component: 'var(--figma-color-icon-component)',
89
+ 'component-pressed': 'var(--figma-color-icon-component-pressed)',
90
+ 'component-secondary': 'var(--figma-color-icon-component-secondary)',
91
+ 'component-tertiary': 'var(--figma-color-icon-component-tertiary)',
92
+ danger: 'var(--figma-color-icon-danger)',
93
+ 'danger-hover': 'var(--figma-color-icon-danger-hover)',
94
+ 'danger-pressed': 'var(--figma-color-icon-danger-pressed)',
95
+ 'danger-secondary': 'var(--figma-color-icon-danger-secondary)',
96
+ 'danger-secondary-hover': 'var(--figma-color-icon-danger-secondary-hover)',
97
+ 'danger-tertiary': 'var(--figma-color-icon-danger-tertiary)',
98
+ disabled: 'var(--figma-color-icon-disabled)',
99
+ hover: 'var(--figma-color-icon-hover)',
100
+ onbrand: 'var(--figma-color-icon-onbrand)',
101
+ 'onbrand-secondary': 'var(--figma-color-icon-onbrand-secondary)',
102
+ 'onbrand-tertiary': 'var(--figma-color-icon-onbrand-tertiary)',
103
+ oncomponent: 'var(--figma-color-icon-oncomponent)',
104
+ 'oncomponent-secondary': 'var(--figma-color-icon-oncomponent-secondary)',
105
+ 'oncomponent-tertiary': 'var(--figma-color-icon-oncomponent-tertiary)',
106
+ ondanger: 'var(--figma-color-icon-ondanger)',
107
+ 'ondanger-secondary': 'var(--figma-color-icon-ondanger-secondary)',
108
+ 'ondanger-tertiary': 'var(--figma-color-icon-ondanger-tertiary)',
109
+ ondisabled: 'var(--figma-color-icon-ondisabled)',
110
+ oninverse: 'var(--figma-color-icon-oninverse)',
111
+ onselected: 'var(--figma-color-icon-onselected)',
112
+ 'onselected-secondary': 'var(--figma-color-icon-onselected-secondary)',
113
+ 'onselected-strong': 'var(--figma-color-icon-onselected-strong)',
114
+ 'onselected-tertiary': 'var(--figma-color-icon-onselected-tertiary)',
115
+ onsuccess: 'var(--figma-color-icon-onsuccess)',
116
+ 'onsuccess-secondary': 'var(--figma-color-icon-onsuccess-secondary)',
117
+ 'onsuccess-tertiary': 'var(--figma-color-icon-onsuccess-tertiary)',
118
+ onwarning: 'var(--figma-color-icon-onwarning)',
119
+ 'onwarning-secondary': 'var(--figma-color-icon-onwarning-secondary)',
120
+ 'onwarning-tertiary': 'var(--figma-color-icon-onwarning-tertiary)',
121
+ pressed: 'var(--figma-color-icon-pressed)',
122
+ secondary: 'var(--figma-color-icon-secondary)',
123
+ 'secondary-hover': 'var(--figma-color-icon-secondary-hover)',
124
+ selected: 'var(--figma-color-icon-selected)',
125
+ 'selected-secondary': 'var(--figma-color-icon-selected-secondary)',
126
+ 'selected-tertiary': 'var(--figma-color-icon-selected-tertiary)',
127
+ success: 'var(--figma-color-icon-success)',
128
+ 'success-pressed': 'var(--figma-color-icon-success-pressed)',
129
+ 'success-secondary': 'var(--figma-color-icon-success-secondary)',
130
+ 'success-tertiary': 'var(--figma-color-icon-success-tertiary)',
131
+ tertiary: 'var(--figma-color-icon-tertiary)',
132
+ 'tertiary-hover': 'var(--figma-color-icon-tertiary-hover)',
133
+ warning: 'var(--figma-color-icon-warning)',
134
+ 'warning-pressed': 'var(--figma-color-icon-warning-pressed)',
135
+ 'warning-secondary': 'var(--figma-color-icon-warning-secondary)',
136
+ 'warning-tertiary': 'var(--figma-color-icon-warning-tertiary)',
137
+ },
138
+ text: {
139
+ DEFAULT: 'var(--figma-color-text)',
140
+ brand: 'var(--figma-color-text-brand)',
141
+ 'brand-secondary': 'var(--figma-color-text-brand-secondary)',
142
+ 'brand-tertiary': 'var(--figma-color-text-brand-tertiary)',
143
+ component: 'var(--figma-color-text-component)',
144
+ 'component-pressed': 'var(--figma-color-text-component-pressed)',
145
+ 'component-secondary': 'var(--figma-color-text-component-secondary)',
146
+ 'component-tertiary': 'var(--figma-color-text-component-tertiary)',
147
+ danger: 'var(--figma-color-text-danger)',
148
+ 'danger-secondary': 'var(--figma-color-text-danger-secondary)',
149
+ 'danger-tertiary': 'var(--figma-color-text-danger-tertiary)',
150
+ disabled: 'var(--figma-color-text-disabled)',
151
+ hover: 'var(--figma-color-text-hover)',
152
+ onbrand: 'var(--figma-color-text-onbrand)',
153
+ 'onbrand-secondary': 'var(--figma-color-text-onbrand-secondary)',
154
+ 'onbrand-tertiary': 'var(--figma-color-text-onbrand-tertiary)',
155
+ oncomponent: 'var(--figma-color-text-oncomponent)',
156
+ 'oncomponent-secondary': 'var(--figma-color-text-oncomponent-secondary)',
157
+ 'oncomponent-tertiary': 'var(--figma-color-text-oncomponent-tertiary)',
158
+ ondanger: 'var(--figma-color-text-ondanger)',
159
+ 'ondanger-secondary': 'var(--figma-color-text-ondanger-secondary)',
160
+ 'ondanger-tertiary': 'var(--figma-color-text-ondanger-tertiary)',
161
+ ondisabled: 'var(--figma-color-text-ondisabled)',
162
+ oninverse: 'var(--figma-color-text-oninverse)',
163
+ onselected: 'var(--figma-color-text-onselected)',
164
+ 'onselected-secondary': 'var(--figma-color-text-onselected-secondary)',
165
+ 'onselected-strong': 'var(--figma-color-text-onselected-strong)',
166
+ 'onselected-tertiary': 'var(--figma-color-text-onselected-tertiary)',
167
+ onsuccess: 'var(--figma-color-text-onsuccess)',
168
+ 'onsuccess-secondary': 'var(--figma-color-text-onsuccess-secondary)',
169
+ 'onsuccess-tertiary': 'var(--figma-color-text-onsuccess-tertiary)',
170
+ onwarning: 'var(--figma-color-text-onwarning)',
171
+ 'onwarning-secondary': 'var(--figma-color-text-onwarning-secondary)',
172
+ 'onwarning-tertiary': 'var(--figma-color-text-onwarning-tertiary)',
173
+ secondary: 'var(--figma-color-text-secondary)',
174
+ 'secondary-hover': 'var(--figma-color-text-secondary-hover)',
175
+ selected: 'var(--figma-color-text-selected)',
176
+ 'selected-secondary': 'var(--figma-color-text-selected-secondary)',
177
+ 'selected-tertiary': 'var(--figma-color-text-selected-tertiary)',
178
+ success: 'var(--figma-color-text-success)',
179
+ 'success-secondary': 'var(--figma-color-text-success-secondary)',
180
+ 'success-tertiary': 'var(--figma-color-text-success-tertiary)',
181
+ tertiary: 'var(--figma-color-text-tertiary)',
182
+ 'tertiary-hover': 'var(--figma-color-text-tertiary-hover)',
183
+ warning: 'var(--figma-color-text-warning)',
184
+ 'warning-secondary': 'var(--figma-color-text-warning-secondary)',
185
+ 'warning-tertiary': 'var(--figma-color-text-warning-tertiary)',
186
+ },
180
187
  },
181
188
  fontFamily: {
182
189
  default: 'var(--font-family-default)',
@@ -251,5 +258,30 @@ export default {
251
258
  400: 'var(--elevation-400)',
252
259
  500: 'var(--elevation-500)',
253
260
  },
261
+ textColor: ({ theme }) => {
262
+ return {
263
+ current: 'currentColor',
264
+ inherit: 'inherit',
265
+ transparent: 'transparent',
266
+ ...theme('colors').text,
267
+ };
268
+ },
269
+ backgroundColor: ({ theme }) => {
270
+ return {
271
+ current: 'currentColor',
272
+ inherit: 'inherit',
273
+ transparent: 'transparent',
274
+ ...theme('colors').bg,
275
+ };
276
+ },
277
+ borderColor: ({ theme }) => {
278
+ return {
279
+ current: 'currentColor',
280
+ inherit: 'inherit',
281
+ transparent: 'transparent',
282
+ DEFAULT: theme('colors').border.DEFAULT,
283
+ ...theme('colors').border,
284
+ };
285
+ },
254
286
  },
255
287
  };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "figma-kit",
3
3
  "description": "A set of React components for building Figma plugins.",
4
4
  "homepage": "https://figma-kit.dev",
5
- "version": "1.0.0-beta.5",
5
+ "version": "1.0.0-beta.8",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
@@ -13,7 +13,8 @@
13
13
  "figma",
14
14
  "figma react components",
15
15
  "figma design system",
16
- "hook"
16
+ "UI3",
17
+ "component-library"
17
18
  ],
18
19
  "type": "module",
19
20
  "files": [