orbiq-neural-ui-kit 0.0.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.
- package/README.md +64 -0
- package/fesm2022/orbiq-neural-ui-kit.mjs +13521 -0
- package/fesm2022/orbiq-neural-ui-kit.mjs.map +1 -0
- package/package.json +45 -0
- package/src/theme.css +6 -0
- package/tailwind/colorPalette.js +193 -0
- package/tailwind/colors.json +1173 -0
- package/tailwind/content.js +58 -0
- package/tailwind/figma-tokens-to-theme.js +471 -0
- package/tailwind/figma-tokens-to-theme.test.js +22 -0
- package/tailwind/generated/colors.json +1173 -0
- package/tailwind/generated/effects.json +39 -0
- package/tailwind/generated/radius.json +14 -0
- package/tailwind/generated/typography.json +402 -0
- package/tailwind/iconPackPlugin.js +108 -0
- package/tailwind/index.js +2 -0
- package/tailwind/lucideIconsPlugin.js +23 -0
- package/tailwind/migrate-tokens-v2.js +938 -0
- package/tailwind/migrate-tokens-v2.test.js +528 -0
- package/tailwind/plugin.js +693 -0
- package/tailwind/preset.js +36 -0
- package/types/orbiq-neural-ui-kit.d.ts +1892 -0
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"elevation": {
|
|
3
|
+
"light": {
|
|
4
|
+
"sm": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 1px 3px 0px #00000024",
|
|
5
|
+
"base": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000029, 0px 2px 5px 0px #00000024",
|
|
6
|
+
"md": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000026, 0px 0px 6px 2px #0000000a, 0px 6px 12px -2px #00000014",
|
|
7
|
+
"lg": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #0000002e, 0px 0px 6px 3px #00000008, 0px 18px 22px -6px #0000001a",
|
|
8
|
+
"xl": "inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 0px 10px 2px #0000000a, 0px 24px 30px -8px #0000001a",
|
|
9
|
+
"2xl": "inset 0px 0.25px 2px 0px #ffffff29, 0px 0px 1.5px 0px #00000040, 0px 0px 10px 2px #00000008, 0px 44px 52px -10px #0000001a"
|
|
10
|
+
},
|
|
11
|
+
"dark": {
|
|
12
|
+
"sm": "inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 14px 0px #0000002e, 0px 1px 3px 0px #000000b2",
|
|
13
|
+
"base": "inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 14px 0px #0000002e, 0px 2px 5px 0px #00000099",
|
|
14
|
+
"md": "inset 0px 0.5px 0.5px 0.5px #ffffff08, 0px 0px 16px 2px #00000033, 0px 6px 12px -2px #00000099",
|
|
15
|
+
"lg": "inset 0px 0.5px 1.5px 0.5px #ffffff0a, 0px 0px 16px 0px #0000001a, 0px 18px 20px -8px #00000085",
|
|
16
|
+
"xl": "inset 0px 0.5px 1.5px 0.5px #ffffff0a, 0px 0px 14px 2px #0000001f, 0px 26px 34px -6px #0000006b",
|
|
17
|
+
"2xl": "inset 0px 0.5px 1.5px 0.5px #ffffff0f, 0px 0px 14px 10px #0000001f, 0px 44px 52px -4px #0000006b"
|
|
18
|
+
},
|
|
19
|
+
"custom": {}
|
|
20
|
+
},
|
|
21
|
+
"focus": {
|
|
22
|
+
"light": {
|
|
23
|
+
"default": "0px 0px 0px 2px #c9c9c9e5",
|
|
24
|
+
"red": "0px 0px 0px 2px #fa9c9de5",
|
|
25
|
+
"green": "0px 0px 0px 2px #5ed29ce5",
|
|
26
|
+
"amber": "0px 0px 0px 2px #ffda7ce5",
|
|
27
|
+
"blue": "0px 0px 0px 2px #65b9fce5",
|
|
28
|
+
"violet": "0px 0px 0px 2px #bea2fce5"
|
|
29
|
+
},
|
|
30
|
+
"dark": {
|
|
31
|
+
"default": "0px 0px 0px 3px #464646cc",
|
|
32
|
+
"red": "0px 0px 0px 3px #751819cc",
|
|
33
|
+
"green": "0px 0px 0px 3px #1d563bcc",
|
|
34
|
+
"amber": "0px 0px 0px 3px #744811cc",
|
|
35
|
+
"blue": "0px 0px 0px 3px #0e3d62cc",
|
|
36
|
+
"violet": "0px 0px 0px 3px #412d87cc"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,402 @@
|
|
|
1
|
+
{
|
|
2
|
+
"fontFamily": {
|
|
3
|
+
"text": "Inter Variable"
|
|
4
|
+
},
|
|
5
|
+
"fontWeight": {
|
|
6
|
+
"regular": 420,
|
|
7
|
+
"medium": 500,
|
|
8
|
+
"semibold": 600,
|
|
9
|
+
"bold": 700,
|
|
10
|
+
"black": 800
|
|
11
|
+
},
|
|
12
|
+
"fontSize": {
|
|
13
|
+
"2xs": [
|
|
14
|
+
"11px",
|
|
15
|
+
{
|
|
16
|
+
"lineHeight": "1.15",
|
|
17
|
+
"letterSpacing": "0.01em",
|
|
18
|
+
"fontWeight": "420"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"xs": [
|
|
22
|
+
"12px",
|
|
23
|
+
{
|
|
24
|
+
"lineHeight": "1.15",
|
|
25
|
+
"letterSpacing": "0.02em",
|
|
26
|
+
"fontWeight": "420"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"sm": [
|
|
30
|
+
"13px",
|
|
31
|
+
{
|
|
32
|
+
"lineHeight": "1.15",
|
|
33
|
+
"letterSpacing": "0.02em",
|
|
34
|
+
"fontWeight": "420"
|
|
35
|
+
}
|
|
36
|
+
],
|
|
37
|
+
"base": [
|
|
38
|
+
"14px",
|
|
39
|
+
{
|
|
40
|
+
"lineHeight": "1.15",
|
|
41
|
+
"letterSpacing": "0.02em",
|
|
42
|
+
"fontWeight": "420"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"md": [
|
|
46
|
+
"15px",
|
|
47
|
+
{
|
|
48
|
+
"lineHeight": "1.15",
|
|
49
|
+
"letterSpacing": "0.02em",
|
|
50
|
+
"fontWeight": "420"
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
"lg": [
|
|
54
|
+
"16px",
|
|
55
|
+
{
|
|
56
|
+
"lineHeight": "1.15",
|
|
57
|
+
"letterSpacing": "0.02em",
|
|
58
|
+
"fontWeight": "420"
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
"xl": [
|
|
62
|
+
"17px",
|
|
63
|
+
{
|
|
64
|
+
"lineHeight": "1.15",
|
|
65
|
+
"letterSpacing": "0.02em",
|
|
66
|
+
"fontWeight": "420"
|
|
67
|
+
}
|
|
68
|
+
],
|
|
69
|
+
"2xl": [
|
|
70
|
+
"18px",
|
|
71
|
+
{
|
|
72
|
+
"lineHeight": "1.15",
|
|
73
|
+
"letterSpacing": "0.01em",
|
|
74
|
+
"fontWeight": "420"
|
|
75
|
+
}
|
|
76
|
+
],
|
|
77
|
+
"3xl": [
|
|
78
|
+
"20px",
|
|
79
|
+
{
|
|
80
|
+
"lineHeight": "1.15",
|
|
81
|
+
"letterSpacing": "0.005em",
|
|
82
|
+
"fontWeight": "420"
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"4xl": [
|
|
86
|
+
"24px",
|
|
87
|
+
{
|
|
88
|
+
"lineHeight": "1.15",
|
|
89
|
+
"letterSpacing": "0.005em",
|
|
90
|
+
"fontWeight": "420"
|
|
91
|
+
}
|
|
92
|
+
],
|
|
93
|
+
"5xl": [
|
|
94
|
+
"26px",
|
|
95
|
+
{
|
|
96
|
+
"lineHeight": "1.6",
|
|
97
|
+
"letterSpacing": "0.01em",
|
|
98
|
+
"fontWeight": "420"
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
"6xl": [
|
|
102
|
+
"28px",
|
|
103
|
+
{
|
|
104
|
+
"lineHeight": "1.6",
|
|
105
|
+
"letterSpacing": "0.01em",
|
|
106
|
+
"fontWeight": "420"
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
"7xl": [
|
|
110
|
+
"32px",
|
|
111
|
+
{
|
|
112
|
+
"lineHeight": "1.6",
|
|
113
|
+
"letterSpacing": "0.02em",
|
|
114
|
+
"fontWeight": "420"
|
|
115
|
+
}
|
|
116
|
+
],
|
|
117
|
+
"8xl": [
|
|
118
|
+
"40px",
|
|
119
|
+
{
|
|
120
|
+
"lineHeight": "1.4",
|
|
121
|
+
"letterSpacing": "0em",
|
|
122
|
+
"fontWeight": "420"
|
|
123
|
+
}
|
|
124
|
+
],
|
|
125
|
+
"9xl": [
|
|
126
|
+
"44px",
|
|
127
|
+
{
|
|
128
|
+
"lineHeight": "1.4",
|
|
129
|
+
"letterSpacing": "0em",
|
|
130
|
+
"fontWeight": "420"
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"10xl": [
|
|
134
|
+
"48px",
|
|
135
|
+
{
|
|
136
|
+
"lineHeight": "1.4",
|
|
137
|
+
"letterSpacing": "0em",
|
|
138
|
+
"fontWeight": "420"
|
|
139
|
+
}
|
|
140
|
+
],
|
|
141
|
+
"11xl": [
|
|
142
|
+
"52px",
|
|
143
|
+
{
|
|
144
|
+
"lineHeight": "1.4",
|
|
145
|
+
"letterSpacing": "0em",
|
|
146
|
+
"fontWeight": "420"
|
|
147
|
+
}
|
|
148
|
+
],
|
|
149
|
+
"12xl": [
|
|
150
|
+
"56px",
|
|
151
|
+
{
|
|
152
|
+
"lineHeight": "1.4",
|
|
153
|
+
"letterSpacing": "0.005em",
|
|
154
|
+
"fontWeight": "420"
|
|
155
|
+
}
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
"textTransform": {},
|
|
159
|
+
"paragraph": {
|
|
160
|
+
"2xs": {
|
|
161
|
+
"lineHeight": "1.6",
|
|
162
|
+
"letterSpacing": "0.01em"
|
|
163
|
+
},
|
|
164
|
+
"xs": {
|
|
165
|
+
"lineHeight": "1.6",
|
|
166
|
+
"letterSpacing": "0.02em"
|
|
167
|
+
},
|
|
168
|
+
"sm": {
|
|
169
|
+
"lineHeight": "1.5",
|
|
170
|
+
"letterSpacing": "0.015em"
|
|
171
|
+
},
|
|
172
|
+
"base": {
|
|
173
|
+
"lineHeight": "1.5",
|
|
174
|
+
"letterSpacing": "0.02em"
|
|
175
|
+
},
|
|
176
|
+
"md": {
|
|
177
|
+
"lineHeight": "1.5",
|
|
178
|
+
"letterSpacing": "0.02em"
|
|
179
|
+
},
|
|
180
|
+
"lg": {
|
|
181
|
+
"lineHeight": "1.5",
|
|
182
|
+
"letterSpacing": "0.02em"
|
|
183
|
+
},
|
|
184
|
+
"xl": {
|
|
185
|
+
"lineHeight": "1.5",
|
|
186
|
+
"letterSpacing": "0.02em"
|
|
187
|
+
},
|
|
188
|
+
"2xl": {
|
|
189
|
+
"lineHeight": "1.5",
|
|
190
|
+
"letterSpacing": "0.01em"
|
|
191
|
+
},
|
|
192
|
+
"3xl": {
|
|
193
|
+
"lineHeight": "1.48",
|
|
194
|
+
"letterSpacing": "0.01em"
|
|
195
|
+
},
|
|
196
|
+
"4xl": {
|
|
197
|
+
"lineHeight": "1.4",
|
|
198
|
+
"letterSpacing": "0.005em"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
"tracking": {
|
|
202
|
+
"text": {
|
|
203
|
+
"2xs": {
|
|
204
|
+
"regular": "0.01em",
|
|
205
|
+
"medium": "0.01em",
|
|
206
|
+
"semibold": "0.01em",
|
|
207
|
+
"bold": "0.01em",
|
|
208
|
+
"black": "0.01em"
|
|
209
|
+
},
|
|
210
|
+
"xs": {
|
|
211
|
+
"regular": "0.02em",
|
|
212
|
+
"medium": "0.02em",
|
|
213
|
+
"semibold": "0.015em",
|
|
214
|
+
"bold": "0.015em",
|
|
215
|
+
"black": "0.015em"
|
|
216
|
+
},
|
|
217
|
+
"sm": {
|
|
218
|
+
"regular": "0.02em",
|
|
219
|
+
"medium": "0.02em",
|
|
220
|
+
"semibold": "0.015em",
|
|
221
|
+
"bold": "0.015em",
|
|
222
|
+
"black": "0.015em"
|
|
223
|
+
},
|
|
224
|
+
"base": {
|
|
225
|
+
"regular": "0.02em",
|
|
226
|
+
"medium": "0.015em",
|
|
227
|
+
"semibold": "0.015em",
|
|
228
|
+
"bold": "0.015em"
|
|
229
|
+
},
|
|
230
|
+
"md": {
|
|
231
|
+
"regular": "0.02em",
|
|
232
|
+
"medium": "0.015em",
|
|
233
|
+
"semibold": "0.015em",
|
|
234
|
+
"bold": "0.015em",
|
|
235
|
+
"black": "0.015em"
|
|
236
|
+
},
|
|
237
|
+
"lg": {
|
|
238
|
+
"regular": "0.02em",
|
|
239
|
+
"medium": "0.015em",
|
|
240
|
+
"semibold": "0.015em",
|
|
241
|
+
"bold": "0.015em",
|
|
242
|
+
"black": "0.015em"
|
|
243
|
+
},
|
|
244
|
+
"xl": {
|
|
245
|
+
"regular": "0.02em",
|
|
246
|
+
"medium": "0.015em",
|
|
247
|
+
"semibold": "0.015em",
|
|
248
|
+
"bold": "0.015em",
|
|
249
|
+
"black": "0.015em"
|
|
250
|
+
},
|
|
251
|
+
"2xl": {
|
|
252
|
+
"regular": "0.01em",
|
|
253
|
+
"medium": "0.01em",
|
|
254
|
+
"semibold": "0.01em",
|
|
255
|
+
"bold": "0.01em",
|
|
256
|
+
"black": "0.01em"
|
|
257
|
+
},
|
|
258
|
+
"3xl": {
|
|
259
|
+
"regular": "0.005em",
|
|
260
|
+
"medium": "0.01em",
|
|
261
|
+
"semibold": "0.01em",
|
|
262
|
+
"bold": "0.01em",
|
|
263
|
+
"black": "0.01em"
|
|
264
|
+
},
|
|
265
|
+
"4xl": {
|
|
266
|
+
"regular": "0.005em",
|
|
267
|
+
"medium": "0.005em",
|
|
268
|
+
"semibold": "0.005em",
|
|
269
|
+
"bold": "0.005em",
|
|
270
|
+
"black": "0.005em"
|
|
271
|
+
},
|
|
272
|
+
"5xl": {
|
|
273
|
+
"regular": "0.01em",
|
|
274
|
+
"medium": "0.005em",
|
|
275
|
+
"semibold": "0.005em",
|
|
276
|
+
"bold": "0.005em",
|
|
277
|
+
"black": "0.01em"
|
|
278
|
+
},
|
|
279
|
+
"6xl": {
|
|
280
|
+
"regular": "0.01em",
|
|
281
|
+
"medium": "0.005em",
|
|
282
|
+
"semibold": "0.01em",
|
|
283
|
+
"bold": "0.015em",
|
|
284
|
+
"black": "0.01em"
|
|
285
|
+
},
|
|
286
|
+
"7xl": {
|
|
287
|
+
"regular": "0.02em",
|
|
288
|
+
"medium": "0.015em",
|
|
289
|
+
"semibold": "0.015em",
|
|
290
|
+
"bold": "0.015em",
|
|
291
|
+
"black": "0.005em"
|
|
292
|
+
},
|
|
293
|
+
"8xl": {
|
|
294
|
+
"regular": "0em",
|
|
295
|
+
"medium": "0em",
|
|
296
|
+
"semibold": "0em",
|
|
297
|
+
"bold": "0em",
|
|
298
|
+
"black": "0em"
|
|
299
|
+
},
|
|
300
|
+
"9xl": {
|
|
301
|
+
"regular": "0em",
|
|
302
|
+
"medium": "0em",
|
|
303
|
+
"semibold": "0em",
|
|
304
|
+
"bold": "0em",
|
|
305
|
+
"black": "0em"
|
|
306
|
+
},
|
|
307
|
+
"10xl": {
|
|
308
|
+
"regular": "0em",
|
|
309
|
+
"medium": "0em",
|
|
310
|
+
"semibold": "0em",
|
|
311
|
+
"bold": "0.005em",
|
|
312
|
+
"black": "0.005em"
|
|
313
|
+
},
|
|
314
|
+
"11xl": {
|
|
315
|
+
"regular": "0em",
|
|
316
|
+
"medium": "0em",
|
|
317
|
+
"semibold": "0em",
|
|
318
|
+
"bold": "0em",
|
|
319
|
+
"black": "0.005em"
|
|
320
|
+
},
|
|
321
|
+
"12xl": {
|
|
322
|
+
"regular": "0.005em",
|
|
323
|
+
"medium": "0em",
|
|
324
|
+
"semibold": "0em",
|
|
325
|
+
"bold": "0em",
|
|
326
|
+
"black": "0em"
|
|
327
|
+
}
|
|
328
|
+
},
|
|
329
|
+
"paragraph": {
|
|
330
|
+
"2xs": {
|
|
331
|
+
"regular": "0.01em",
|
|
332
|
+
"medium": "0.01em",
|
|
333
|
+
"semibold": "0.01em",
|
|
334
|
+
"bold": "0.01em",
|
|
335
|
+
"black": "0.01em"
|
|
336
|
+
},
|
|
337
|
+
"xs": {
|
|
338
|
+
"regular": "0.02em",
|
|
339
|
+
"medium": "0.02em",
|
|
340
|
+
"semibold": "0.015em",
|
|
341
|
+
"bold": "0.015em",
|
|
342
|
+
"black": "0.015em"
|
|
343
|
+
},
|
|
344
|
+
"sm": {
|
|
345
|
+
"regular": "0.015em",
|
|
346
|
+
"medium": "0.02em",
|
|
347
|
+
"semibold": "0.015em",
|
|
348
|
+
"bold": "0.015em",
|
|
349
|
+
"black": "0.015em"
|
|
350
|
+
},
|
|
351
|
+
"base": {
|
|
352
|
+
"regular": "0.02em",
|
|
353
|
+
"medium": "0.015em",
|
|
354
|
+
"semibold": "0.015em",
|
|
355
|
+
"bold": "0.015em",
|
|
356
|
+
"black": "0.015em"
|
|
357
|
+
},
|
|
358
|
+
"md": {
|
|
359
|
+
"regular": "0.02em",
|
|
360
|
+
"medium": "0.015em",
|
|
361
|
+
"semibold": "0.015em",
|
|
362
|
+
"bold": "0.015em",
|
|
363
|
+
"black": "0.015em"
|
|
364
|
+
},
|
|
365
|
+
"lg": {
|
|
366
|
+
"regular": "0.02em",
|
|
367
|
+
"medium": "0.015em",
|
|
368
|
+
"semibold": "0.015em",
|
|
369
|
+
"bold": "0.015em",
|
|
370
|
+
"black": "0.015em"
|
|
371
|
+
},
|
|
372
|
+
"xl": {
|
|
373
|
+
"regular": "0.02em",
|
|
374
|
+
"medium": "0.015em",
|
|
375
|
+
"semibold": "0.015em",
|
|
376
|
+
"bold": "0.015em",
|
|
377
|
+
"black": "0.015em"
|
|
378
|
+
},
|
|
379
|
+
"2xl": {
|
|
380
|
+
"regular": "0.01em",
|
|
381
|
+
"medium": "0.01em",
|
|
382
|
+
"semibold": "0.01em",
|
|
383
|
+
"bold": "0.01em",
|
|
384
|
+
"black": "0.01em"
|
|
385
|
+
},
|
|
386
|
+
"3xl": {
|
|
387
|
+
"regular": "0.01em",
|
|
388
|
+
"medium": "0.01em",
|
|
389
|
+
"semibold": "0.01em",
|
|
390
|
+
"bold": "0.01em",
|
|
391
|
+
"black": "0.01em"
|
|
392
|
+
},
|
|
393
|
+
"4xl": {
|
|
394
|
+
"regular": "0.005em",
|
|
395
|
+
"medium": "0.005em",
|
|
396
|
+
"semibold": "0.005em",
|
|
397
|
+
"bold": "0.005em",
|
|
398
|
+
"black": "0.005em"
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import plugin from 'tailwindcss/plugin'
|
|
2
|
+
import fs from 'node:fs'
|
|
3
|
+
import path from 'node:path'
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Builds a Tailwind plugin that exposes every SVG in `iconsDir` as a
|
|
7
|
+
* `<prefix>-<name>` utility class. Each class renders as a block-level
|
|
8
|
+
* square (matching Tailwind preflight's `svg { display: block }`) that
|
|
9
|
+
* masks the icon SVG with the current text color — size with `size-*`,
|
|
10
|
+
* tint with `text-*`:
|
|
11
|
+
*
|
|
12
|
+
* <span class="lucide-menu size-4 text-ink-gray-6" />
|
|
13
|
+
*
|
|
14
|
+
* Designed to be reused for any pack that ships a flat directory of named
|
|
15
|
+
* SVGs (lucide, tabler, heroicons, custom in-repo packs, ...). Tailwind's
|
|
16
|
+
* JIT only emits CSS for classes actually referenced in source, so a
|
|
17
|
+
* full-pack registration is a lookup table — generated CSS stays minimal.
|
|
18
|
+
*
|
|
19
|
+
* @param {object} options
|
|
20
|
+
* @param {string} options.prefix Class prefix, e.g. 'lucide'.
|
|
21
|
+
* @param {string} options.iconsDir Absolute path to a directory of `<name>.svg` files.
|
|
22
|
+
* @param {number} [options.normalizeStrokeWidth] If set, rewrites every SVG's stroke-width to this value.
|
|
23
|
+
* @param {string} [options.defaultColor] CSS color baked as `color: ...` (overridable via `text-*`).
|
|
24
|
+
*/
|
|
25
|
+
export function iconPackPlugin({
|
|
26
|
+
prefix,
|
|
27
|
+
iconsDir,
|
|
28
|
+
normalizeStrokeWidth,
|
|
29
|
+
defaultColor,
|
|
30
|
+
}) {
|
|
31
|
+
if (!prefix) throw new Error('iconPackPlugin: `prefix` is required')
|
|
32
|
+
if (!iconsDir) throw new Error('iconPackPlugin: `iconsDir` is required')
|
|
33
|
+
|
|
34
|
+
const svgDataUriCache = new Map()
|
|
35
|
+
|
|
36
|
+
function encodeSvgAsDataUri(name) {
|
|
37
|
+
if (svgDataUriCache.has(name)) return svgDataUriCache.get(name)
|
|
38
|
+
|
|
39
|
+
const filePath = path.join(iconsDir, `${name}.svg`)
|
|
40
|
+
if (!fs.existsSync(filePath)) {
|
|
41
|
+
svgDataUriCache.set(name, null)
|
|
42
|
+
return null
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
let svg = fs.readFileSync(filePath, 'utf8')
|
|
46
|
+
if (normalizeStrokeWidth != null) {
|
|
47
|
+
svg = svg.replace(
|
|
48
|
+
/stroke-width="[^"]+"/g,
|
|
49
|
+
`stroke-width="${normalizeStrokeWidth}"`,
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
svg = svg.replace(/\s+/g, ' ').trim()
|
|
53
|
+
const uri = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
|
|
54
|
+
svgDataUriCache.set(name, uri)
|
|
55
|
+
return uri
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function readAvailableIconNames() {
|
|
59
|
+
try {
|
|
60
|
+
return fs
|
|
61
|
+
.readdirSync(iconsDir)
|
|
62
|
+
.filter((f) => f.endsWith('.svg'))
|
|
63
|
+
.map((f) => f.replace(/\.svg$/, ''))
|
|
64
|
+
} catch {
|
|
65
|
+
return []
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return plugin(({ matchComponents }) => {
|
|
70
|
+
const names = readAvailableIconNames()
|
|
71
|
+
const values = Object.fromEntries(names.map((n) => [n, n]))
|
|
72
|
+
|
|
73
|
+
// Registered via `matchComponents` (not `matchUtilities`) so Tailwind
|
|
74
|
+
// puts these rules in the components layer. Regular utilities like
|
|
75
|
+
// `size-4`, `w-5`, `text-ink-gray-6` live in the utilities layer which
|
|
76
|
+
// comes after — so they always win without needing `!important`.
|
|
77
|
+
matchComponents(
|
|
78
|
+
{
|
|
79
|
+
[prefix]: (value) => {
|
|
80
|
+
const uri = encodeSvgAsDataUri(value)
|
|
81
|
+
if (!uri) return {}
|
|
82
|
+
const rules = {
|
|
83
|
+
// Match Tailwind preflight's `svg { display: block }` so a
|
|
84
|
+
// class-based icon behaves identically to the inline-svg form
|
|
85
|
+
// it replaces — no phantom line-box height in the parent, no
|
|
86
|
+
// baseline drift next to text in flex containers.
|
|
87
|
+
display: 'block',
|
|
88
|
+
width: '1em',
|
|
89
|
+
height: '1em',
|
|
90
|
+
'background-color': 'currentColor',
|
|
91
|
+
'-webkit-mask-image': `url("${uri}")`,
|
|
92
|
+
'mask-image': `url("${uri}")`,
|
|
93
|
+
'-webkit-mask-repeat': 'no-repeat',
|
|
94
|
+
'mask-repeat': 'no-repeat',
|
|
95
|
+
'-webkit-mask-position': 'center',
|
|
96
|
+
'mask-position': 'center',
|
|
97
|
+
'-webkit-mask-size': 'contain',
|
|
98
|
+
'mask-size': 'contain',
|
|
99
|
+
'flex-shrink': '0',
|
|
100
|
+
}
|
|
101
|
+
if (defaultColor) rules.color = defaultColor
|
|
102
|
+
return rules
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
{ values, type: 'any' },
|
|
106
|
+
)
|
|
107
|
+
})
|
|
108
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import path from 'node:path'
|
|
2
|
+
import { createRequire } from 'node:module'
|
|
3
|
+
import { iconPackPlugin } from './iconPackPlugin.js'
|
|
4
|
+
|
|
5
|
+
// Resolve lucide-static's icons directory once per plugin init. Works whether
|
|
6
|
+
// frappe-ui is consumed locally or installed as a dependency of another app.
|
|
7
|
+
const require = createRequire(import.meta.url)
|
|
8
|
+
const ICONS_DIR = path.join(
|
|
9
|
+
path.dirname(require.resolve('lucide-static/package.json')),
|
|
10
|
+
'icons',
|
|
11
|
+
)
|
|
12
|
+
|
|
13
|
+
// Lucide ships every icon at stroke-width="2". Override to 1.5 for a lighter,
|
|
14
|
+
// more balanced look that matches the rest of the design system.
|
|
15
|
+
//
|
|
16
|
+
// No `defaultColor` — icons inherit the parent's text color the same way an
|
|
17
|
+
// inline <svg stroke="currentColor"> would. Add `text-ink-*` at the call
|
|
18
|
+
// site when a specific tint is needed.
|
|
19
|
+
export default iconPackPlugin({
|
|
20
|
+
prefix: 'lucide',
|
|
21
|
+
iconsDir: ICONS_DIR,
|
|
22
|
+
normalizeStrokeWidth: 1.5,
|
|
23
|
+
})
|