figma-kit 1.0.0-beta.1 → 1.0.0-beta.2

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 (2) hide show
  1. package/dist/tailwind.preset.js +255 -0
  2. package/package.json +6 -2
package/dist/tailwind.preset.js ADDED
@@ -0,0 +1,255 @@
1
+ export default {
2
+ theme: {
3
+ colors: {
4
+ current: 'currentColor',
5
+ inherit: 'inherit',
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)',
180
+ },
181
+ fontFamily: {
182
+ default: 'var(--font-family-default)',
183
+ monospace: 'var(--font-family-monospace)',
184
+ },
185
+ fontWeight: {
186
+ default: 'var(--font-weight-default)',
187
+ strong: 'var(--font-weight-strong)',
188
+ },
189
+ fontSize: {
190
+ 'size-1': 'var(--font-size-1)',
191
+ 'size-2': 'var(--font-size-2)',
192
+ 'size-3': 'var(--font-size-3)',
193
+ 'size-4': 'var(--font-size-4)',
194
+ 'size-5': 'var(--font-size-5)',
195
+ 'size-6': 'var(--font-size-6)',
196
+ 'size-7': 'var(--font-size-7)',
197
+ 'size-8': 'var(--font-size-8)',
198
+ 'size-9': 'var(--font-size-9)',
199
+ 'size-10': 'var(--font-size-10)',
200
+ 'size-default': 'var(--font-size-default)',
201
+ small: 'var(--font-size-1)',
202
+ medium: 'var(--font-size-3)',
203
+ large: 'var(--font-size-5)',
204
+ },
205
+ letterSpacing: {
206
+ 1: 'var(--letter-spacing-1)',
207
+ 2: 'var(--letter-spacing-2)',
208
+ 3: 'var(--letter-spacing-3)',
209
+ 4: 'var(--letter-spacing-4)',
210
+ 5: 'var(--letter-spacing-5)',
211
+ 6: 'var(--letter-spacing-6)',
212
+ 7: 'var(--letter-spacing-7)',
213
+ 8: 'var(--letter-spacing-8)',
214
+ 9: 'var(--letter-spacing-9)',
215
+ 10: 'var(--letter-spacing-10)',
216
+ default: 'var(--letter-spacing-default)',
217
+ small: 'var(--letter-spacing-1)',
218
+ medium: 'var(--letter-spacing-3)',
219
+ large: 'var(--letter-spacing-5)',
220
+ },
221
+ lineHeight: {
222
+ 1: 'var(--line-height-1)',
223
+ 2: 'var(--line-height-2)',
224
+ 3: 'var(--line-height-3)',
225
+ 4: 'var(--line-height-4)',
226
+ 5: 'var(--line-height-5)',
227
+ 6: 'var(--line-height-6)',
228
+ 7: 'var(--line-height-7)',
229
+ 8: 'var(--line-height-8)',
230
+ 9: 'var(--line-height-9)',
231
+ 10: 'var(--line-height-10)',
232
+ default: 'var(--line-height-default)',
233
+ small: 'var(--line-height-1)',
234
+ medium: 'var(--line-height-3)',
235
+ large: 'var(--line-height-5)',
236
+ },
237
+ borderRadius: {
238
+ none: 'none',
239
+ 'extra-small': 'var(--radius-extra-small)',
240
+ small: 'var(--radius-small)',
241
+ medium: 'var(--radius-medium)',
242
+ large: 'var(--radius-large)',
243
+ full: 'var(--radius-full)',
244
+ default: 'var(--radius-default)',
245
+ },
246
+ boxShadow: {
247
+ none: 'none',
248
+ 100: 'var(--elevation-100)',
249
+ 200: 'var(--elevation-200)',
250
+ 300: 'var(--elevation-300)',
251
+ 400: 'var(--elevation-400)',
252
+ 500: 'var(--elevation-500)',
253
+ },
254
+ },
255
+ };
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.1",
5
+ "version": "1.0.0-beta.2",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
@@ -28,6 +28,9 @@
28
28
  "import": "./dist/index.mjs",
29
29
  "types": "./dist/index.d.ts"
30
30
  },
31
+ "./tailwind.preset.js": {
32
+ "require": "./dist/tailwind.preset.js"
33
+ },
31
34
  "./*": "./*"
32
35
  },
33
36
  "main": "dist/index.cjs",
@@ -36,10 +39,11 @@
36
39
  "sideEffects": false,
37
40
  "scripts": {
38
41
  "dev": "vite build --mode development --watch",
39
- "build": "pnpm build:js && pnpm build:css && pnpm build:figma-dev-theme-css",
42
+ "build": "pnpm build:js && pnpm build:css && pnpm build:figma-dev-theme-css && pnpm build:tailwind-preset",
40
43
  "build:js": "vite build",
41
44
  "build:css": "postcss src/styles/index.css -o dist/styles.css",
42
45
  "build:figma-dev-theme-css": "postcss src/styles/figma-development-theme.css -o dist/figma-development-theme.css",
46
+ "build:tailwind-preset": "cp src/tailwind/preset.js dist/tailwind.preset.js",
43
47
  "test": "vitest"
44
48
  },
45
49
  "peerDependencies": {