@framingui/core 0.4.1 → 0.4.3
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 +18 -713
- package/dist/bundled/icon-libraries/generated/feather.json +129 -0
- package/dist/bundled/icon-libraries/generated/heroicons.json +133 -0
- package/dist/bundled/icon-libraries/generated/lucide.json +130 -0
- package/dist/bundled/themes/generated/bold-line.json +346 -0
- package/dist/bundled/themes/generated/classic-magazine.json +193 -0
- package/dist/bundled/themes/generated/dark-boldness.json +274 -0
- package/dist/bundled/themes/generated/editorial-tech.json +348 -0
- package/dist/bundled/themes/generated/minimal-workspace.json +321 -0
- package/dist/bundled/themes/generated/neutral-workspace.json +307 -0
- package/dist/bundled/themes/generated/pebble.json +235 -0
- package/dist/bundled/themes/generated/square-minimalism.json +294 -0
- package/dist/generated-data-dir.d.ts +2 -0
- package/dist/generated-data-dir.d.ts.map +1 -0
- package/dist/generated-data-dir.js +31 -0
- package/dist/generated-data-dir.js.map +1 -0
- package/dist/icon-library.d.ts.map +1 -1
- package/dist/icon-library.js +8 -22
- package/dist/icon-library.js.map +1 -1
- package/dist/layout-validation.d.ts +24 -24
- package/dist/schema-validation.d.ts +6 -6
- package/dist/theme-v2.d.ts.map +1 -1
- package/dist/theme-v2.js +8 -22
- package/dist/theme-v2.js.map +1 -1
- package/package.json +11 -10
- package/LICENSE +0 -21
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "bold-line",
|
|
3
|
+
"name": "Bold Line",
|
|
4
|
+
"schemaVersion": "2.1",
|
|
5
|
+
"brandTone": "bold",
|
|
6
|
+
"designDNA": {
|
|
7
|
+
"moodKeywords": [
|
|
8
|
+
"monotone",
|
|
9
|
+
"high-contrast",
|
|
10
|
+
"linear",
|
|
11
|
+
"spacious",
|
|
12
|
+
"functional"
|
|
13
|
+
],
|
|
14
|
+
"targetEmotion": "clarity",
|
|
15
|
+
"visualAtmosphere": "modern utility app",
|
|
16
|
+
"principles": [
|
|
17
|
+
"Strict monotone palette (Black & White) with one vibrant accent",
|
|
18
|
+
"Line-oriented forms (borders instead of filled surfaces)",
|
|
19
|
+
"Large, highly legible typography",
|
|
20
|
+
"Ample whitespace for cognitive clarity"
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
"tokens": {
|
|
24
|
+
"atomic": {
|
|
25
|
+
"color": {
|
|
26
|
+
"brand": {
|
|
27
|
+
"50": {
|
|
28
|
+
"l": 0.98,
|
|
29
|
+
"c": 0.05,
|
|
30
|
+
"h": 120
|
|
31
|
+
},
|
|
32
|
+
"100": {
|
|
33
|
+
"l": 0.96,
|
|
34
|
+
"c": 0.1,
|
|
35
|
+
"h": 120
|
|
36
|
+
},
|
|
37
|
+
"200": {
|
|
38
|
+
"l": 0.94,
|
|
39
|
+
"c": 0.15,
|
|
40
|
+
"h": 120
|
|
41
|
+
},
|
|
42
|
+
"300": {
|
|
43
|
+
"l": 0.92,
|
|
44
|
+
"c": 0.18,
|
|
45
|
+
"h": 120
|
|
46
|
+
},
|
|
47
|
+
"400": {
|
|
48
|
+
"l": 0.94,
|
|
49
|
+
"c": 0.22,
|
|
50
|
+
"h": 120
|
|
51
|
+
},
|
|
52
|
+
"500": {
|
|
53
|
+
"l": 0.94,
|
|
54
|
+
"c": 0.22,
|
|
55
|
+
"h": 120
|
|
56
|
+
},
|
|
57
|
+
"600": {
|
|
58
|
+
"l": 0.85,
|
|
59
|
+
"c": 0.2,
|
|
60
|
+
"h": 120
|
|
61
|
+
},
|
|
62
|
+
"700": {
|
|
63
|
+
"l": 0.75,
|
|
64
|
+
"c": 0.18,
|
|
65
|
+
"h": 120
|
|
66
|
+
},
|
|
67
|
+
"800": {
|
|
68
|
+
"l": 0.65,
|
|
69
|
+
"c": 0.15,
|
|
70
|
+
"h": 120
|
|
71
|
+
},
|
|
72
|
+
"900": {
|
|
73
|
+
"l": 0.55,
|
|
74
|
+
"c": 0.1,
|
|
75
|
+
"h": 120
|
|
76
|
+
},
|
|
77
|
+
"950": {
|
|
78
|
+
"l": 0.45,
|
|
79
|
+
"c": 0.08,
|
|
80
|
+
"h": 120
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"neutral": {
|
|
84
|
+
"50": {
|
|
85
|
+
"l": 0.98,
|
|
86
|
+
"c": 0,
|
|
87
|
+
"h": 0
|
|
88
|
+
},
|
|
89
|
+
"100": {
|
|
90
|
+
"l": 0.95,
|
|
91
|
+
"c": 0,
|
|
92
|
+
"h": 0
|
|
93
|
+
},
|
|
94
|
+
"200": {
|
|
95
|
+
"l": 0.9,
|
|
96
|
+
"c": 0,
|
|
97
|
+
"h": 0
|
|
98
|
+
},
|
|
99
|
+
"300": {
|
|
100
|
+
"l": 0.8,
|
|
101
|
+
"c": 0,
|
|
102
|
+
"h": 0
|
|
103
|
+
},
|
|
104
|
+
"400": {
|
|
105
|
+
"l": 0.7,
|
|
106
|
+
"c": 0,
|
|
107
|
+
"h": 0
|
|
108
|
+
},
|
|
109
|
+
"500": {
|
|
110
|
+
"l": 0.6,
|
|
111
|
+
"c": 0,
|
|
112
|
+
"h": 0
|
|
113
|
+
},
|
|
114
|
+
"600": {
|
|
115
|
+
"l": 0.4,
|
|
116
|
+
"c": 0,
|
|
117
|
+
"h": 0
|
|
118
|
+
},
|
|
119
|
+
"700": {
|
|
120
|
+
"l": 0.3,
|
|
121
|
+
"c": 0,
|
|
122
|
+
"h": 0
|
|
123
|
+
},
|
|
124
|
+
"800": {
|
|
125
|
+
"l": 0.2,
|
|
126
|
+
"c": 0,
|
|
127
|
+
"h": 0
|
|
128
|
+
},
|
|
129
|
+
"900": {
|
|
130
|
+
"l": 0.1,
|
|
131
|
+
"c": 0,
|
|
132
|
+
"h": 0
|
|
133
|
+
},
|
|
134
|
+
"950": {
|
|
135
|
+
"l": 0.05,
|
|
136
|
+
"c": 0,
|
|
137
|
+
"h": 0
|
|
138
|
+
},
|
|
139
|
+
"white": {
|
|
140
|
+
"l": 1,
|
|
141
|
+
"c": 0,
|
|
142
|
+
"h": 0
|
|
143
|
+
},
|
|
144
|
+
"black": {
|
|
145
|
+
"l": 0,
|
|
146
|
+
"c": 0,
|
|
147
|
+
"h": 0
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
"radius": {
|
|
152
|
+
"none": "0px",
|
|
153
|
+
"sm": "0px",
|
|
154
|
+
"md": "0px",
|
|
155
|
+
"lg": "0px",
|
|
156
|
+
"xl": "0px",
|
|
157
|
+
"full": "0px",
|
|
158
|
+
"select": "0px",
|
|
159
|
+
"circle": "50%"
|
|
160
|
+
},
|
|
161
|
+
"spacing": {
|
|
162
|
+
"2": "0.5rem",
|
|
163
|
+
"4": "1rem",
|
|
164
|
+
"6": "1.5rem",
|
|
165
|
+
"8": "2rem",
|
|
166
|
+
"12": "3rem",
|
|
167
|
+
"16": "4rem",
|
|
168
|
+
"24": "6rem"
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
"semantic": {
|
|
172
|
+
"background": {
|
|
173
|
+
"canvas": "atomic.color.neutral.white",
|
|
174
|
+
"surface": {
|
|
175
|
+
"default": "atomic.color.neutral.white",
|
|
176
|
+
"subtle": "atomic.color.neutral.50",
|
|
177
|
+
"emphasis": "atomic.color.neutral.100"
|
|
178
|
+
},
|
|
179
|
+
"brand": {
|
|
180
|
+
"default": "atomic.color.brand.500",
|
|
181
|
+
"subtle": "atomic.color.brand.100"
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
"text": {
|
|
185
|
+
"primary": "atomic.color.neutral.black",
|
|
186
|
+
"secondary": "atomic.color.neutral.700",
|
|
187
|
+
"muted": "atomic.color.neutral.500",
|
|
188
|
+
"inverted": "atomic.color.neutral.white"
|
|
189
|
+
},
|
|
190
|
+
"border": {
|
|
191
|
+
"default": {
|
|
192
|
+
"subtle": "atomic.color.neutral.200",
|
|
193
|
+
"default": "atomic.color.neutral.black",
|
|
194
|
+
"emphasis": "atomic.color.neutral.black"
|
|
195
|
+
},
|
|
196
|
+
"focus": "atomic.color.brand.500"
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
"recipes": {
|
|
200
|
+
"card": {
|
|
201
|
+
"default": "bg-white border-2 border-black p-6",
|
|
202
|
+
"outlined": "bg-transparent border-2 border-black p-6",
|
|
203
|
+
"flat": "bg-white p-6"
|
|
204
|
+
},
|
|
205
|
+
"button": {
|
|
206
|
+
"primary": "bg-black text-white hover:bg-neutral-800 transition-colors h-14 px-8 text-lg font-bold border-2 border-black rounded-none",
|
|
207
|
+
"secondary": "bg-white text-black hover:bg-neutral-100 transition-colors h-14 px-8 text-lg font-bold border-2 border-black rounded-none",
|
|
208
|
+
"ghost": "bg-transparent text-black hover:bg-neutral-100 transition-colors h-14 px-8 text-lg font-bold border-2 border-transparent hover:border-black rounded-none",
|
|
209
|
+
"icon": "h-14 w-14 flex items-center justify-center border-2 border-transparent hover:border-black hover:bg-neutral-100 transition-colors rounded-none"
|
|
210
|
+
},
|
|
211
|
+
"input": {
|
|
212
|
+
"default": "w-full bg-transparent border-0 border-b-2 border-black py-4 px-2 text-lg text-black placeholder:text-neutral-500 focus:outline-none focus:border-b-[3px] focus:bg-[var(--tekton-bg-brand-default)]/10 transition-all rounded-none",
|
|
213
|
+
"search": "w-full bg-transparent border-0 border-b-2 border-black py-4 px-12 text-lg text-black placeholder:text-neutral-500 focus:outline-none focus:border-b-[3px] focus:bg-[var(--tekton-bg-brand-default)]/10 transition-all rounded-none"
|
|
214
|
+
},
|
|
215
|
+
"badge": {
|
|
216
|
+
"default": "inline-flex items-center bg-black text-white px-3 py-1 text-sm font-bold rounded-none",
|
|
217
|
+
"secondary": "inline-flex items-center bg-white border-2 border-black px-3 py-1 text-sm font-bold text-black rounded-none",
|
|
218
|
+
"brand": "inline-flex items-center bg-[var(--tekton-bg-brand-default)] text-black px-3 py-1 text-sm font-bold border-2 border-black rounded-none"
|
|
219
|
+
},
|
|
220
|
+
"table": {
|
|
221
|
+
"wrapper": "relative w-full overflow-auto mt-8 mb-8",
|
|
222
|
+
"root": "w-full text-left border-collapse",
|
|
223
|
+
"header": "border-b-4 border-black",
|
|
224
|
+
"row": "border-b-[1px] border-neutral-300 hover:bg-[var(--tekton-bg-brand-default)]/20 transition-colors",
|
|
225
|
+
"head": "py-4 px-4 text-base font-bold text-black uppercase tracking-wider",
|
|
226
|
+
"cell": "py-6 px-4 text-lg text-black font-semibold"
|
|
227
|
+
},
|
|
228
|
+
"typography": {
|
|
229
|
+
"h1": "font-sans text-4xl font-semibold tracking-tight text-neutral-950 lg:text-5xl",
|
|
230
|
+
"h2": "font-sans text-3xl font-semibold tracking-tight text-neutral-950",
|
|
231
|
+
"h3": "font-sans text-2xl font-semibold tracking-tight text-neutral-950",
|
|
232
|
+
"h4": "font-sans text-xl font-semibold tracking-tight text-neutral-950",
|
|
233
|
+
"body": "text-lg text-neutral-800 leading-relaxed",
|
|
234
|
+
"caption": "text-sm font-bold text-neutral-500 uppercase tracking-widest"
|
|
235
|
+
},
|
|
236
|
+
"layout": {
|
|
237
|
+
"container": "max-w-7xl mx-auto px-6 md:px-12",
|
|
238
|
+
"section": "py-24",
|
|
239
|
+
"grid": "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12"
|
|
240
|
+
},
|
|
241
|
+
"avatar": {
|
|
242
|
+
"default": "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-none"
|
|
243
|
+
},
|
|
244
|
+
"checkbox": {
|
|
245
|
+
"default": "peer h-4 w-4 shrink-0 rounded-none border-2 border-black ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
|
|
246
|
+
},
|
|
247
|
+
"progress": {
|
|
248
|
+
"default": "relative h-4 w-full overflow-hidden rounded-none bg-secondary",
|
|
249
|
+
"indicator": "h-full w-full flex-1 bg-primary transition-all"
|
|
250
|
+
},
|
|
251
|
+
"slider": {
|
|
252
|
+
"default": "relative flex w-full touch-none select-none items-center",
|
|
253
|
+
"track": "relative h-2 w-full grow overflow-hidden rounded-none bg-secondary",
|
|
254
|
+
"range": "absolute h-full bg-primary",
|
|
255
|
+
"thumb": "block h-5 w-5 rounded-none border-2 border-black bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
256
|
+
},
|
|
257
|
+
"modal": {
|
|
258
|
+
"overlay": "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
|
|
259
|
+
"content": "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] p-6"
|
|
260
|
+
},
|
|
261
|
+
"dropdown": {
|
|
262
|
+
"content": "z-50 min-w-[8rem] overflow-hidden bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] p-1",
|
|
263
|
+
"item": "relative flex cursor-default select-none items-center rounded-none px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
|
|
264
|
+
},
|
|
265
|
+
"form": {
|
|
266
|
+
"item": "space-y-2",
|
|
267
|
+
"label": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 uppercase tracking-widest font-bold",
|
|
268
|
+
"message": "text-[0.8rem] font-medium text-destructive"
|
|
269
|
+
},
|
|
270
|
+
"image": {
|
|
271
|
+
"default": "overflow-hidden rounded-none"
|
|
272
|
+
},
|
|
273
|
+
"radio": {
|
|
274
|
+
"default": "aspect-square h-4 w-4 rounded-full border-2 border-black text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
275
|
+
},
|
|
276
|
+
"textarea": {
|
|
277
|
+
"default": "flex min-h-[80px] w-full rounded-none border-2 border-black bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
278
|
+
},
|
|
279
|
+
"skeleton": {
|
|
280
|
+
"default": "animate-pulse rounded-none bg-muted"
|
|
281
|
+
},
|
|
282
|
+
"scroll-area": {
|
|
283
|
+
"default": "relative overflow-hidden",
|
|
284
|
+
"scrollbar": "flex h-full w-2.5 border-l border-l-transparent p-[1px]"
|
|
285
|
+
},
|
|
286
|
+
"select": {
|
|
287
|
+
"trigger": "flex h-10 w-full items-center justify-between rounded-none border-2 border-black bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
288
|
+
"content": "relative z-50 min-w-[8rem] overflow-hidden bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
|
|
289
|
+
},
|
|
290
|
+
"label": {
|
|
291
|
+
"default": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 uppercase tracking-wider font-bold"
|
|
292
|
+
},
|
|
293
|
+
"separator": {
|
|
294
|
+
"default": "shrink-0 bg-border",
|
|
295
|
+
"horizontal": "h-[1px] w-full",
|
|
296
|
+
"vertical": "h-full w-[1px]"
|
|
297
|
+
},
|
|
298
|
+
"alert-dialog": {
|
|
299
|
+
"content": "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] p-6"
|
|
300
|
+
},
|
|
301
|
+
"popover": {
|
|
302
|
+
"content": "z-50 w-72 bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] p-4 outline-none"
|
|
303
|
+
},
|
|
304
|
+
"hover-card": {
|
|
305
|
+
"content": "z-50 w-64 bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] p-4 outline-none"
|
|
306
|
+
},
|
|
307
|
+
"tooltip": {
|
|
308
|
+
"content": "z-50 overflow-hidden rounded-none bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95"
|
|
309
|
+
},
|
|
310
|
+
"sheet": {
|
|
311
|
+
"content": "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500"
|
|
312
|
+
},
|
|
313
|
+
"toast": {
|
|
314
|
+
"default": "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden p-6 pr-8 shadow-lg transition-all bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
|
|
315
|
+
},
|
|
316
|
+
"sidebar": {
|
|
317
|
+
"default": "flex h-full w-64 flex-col overflow-y-auto bg-background border-2 border-black pb-4"
|
|
318
|
+
},
|
|
319
|
+
"navigation-menu": {
|
|
320
|
+
"list": "group flex flex-1 list-none items-center justify-center space-x-1",
|
|
321
|
+
"trigger": "group inline-flex h-10 w-max items-center justify-center rounded-none bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50"
|
|
322
|
+
},
|
|
323
|
+
"breadcrumb": {
|
|
324
|
+
"list": "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
325
|
+
"item": "inline-flex items-center gap-1.5",
|
|
326
|
+
"link": "transition-colors hover:text-foreground"
|
|
327
|
+
},
|
|
328
|
+
"command": {
|
|
329
|
+
"default": "flex h-full w-full flex-col overflow-hidden bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]",
|
|
330
|
+
"input": "flex h-11 w-full rounded-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
|
331
|
+
},
|
|
332
|
+
"calendar": {
|
|
333
|
+
"default": "p-3 bg-white border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]",
|
|
334
|
+
"cell": "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
|
|
335
|
+
"day": "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-none"
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
},
|
|
339
|
+
"typography": {
|
|
340
|
+
"fontFamily": {
|
|
341
|
+
"sans": "Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
342
|
+
"serif": "Inter, sans-serif",
|
|
343
|
+
"mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
}
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "classic-magazine",
|
|
3
|
+
"name": "Classic Magazine",
|
|
4
|
+
"schemaVersion": "2.1",
|
|
5
|
+
"description": "A typography-first theme inspired by traditional print media. Features a sophisticated mix of serif and sans-serif fonts, strict 0px radius, and high-contrast borders.",
|
|
6
|
+
"brandTone": "Authoritative",
|
|
7
|
+
"tokens": {
|
|
8
|
+
"color": {
|
|
9
|
+
"brand": {
|
|
10
|
+
"50": "#F9F9F9",
|
|
11
|
+
"100": "#F2F2F2",
|
|
12
|
+
"200": "#E5E5E5",
|
|
13
|
+
"300": "#D4D4D4",
|
|
14
|
+
"400": "#A3A3A3",
|
|
15
|
+
"500": "#737373",
|
|
16
|
+
"600": "#525252",
|
|
17
|
+
"700": "#404040",
|
|
18
|
+
"800": "#262626",
|
|
19
|
+
"900": "#000000",
|
|
20
|
+
"950": "#000000"
|
|
21
|
+
},
|
|
22
|
+
"accent": {
|
|
23
|
+
"50": "#FFF1F2",
|
|
24
|
+
"500": "#E11D48",
|
|
25
|
+
"900": "#881337"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"radius": {
|
|
29
|
+
"none": "0px",
|
|
30
|
+
"sm": "0px",
|
|
31
|
+
"md": "0px",
|
|
32
|
+
"lg": "0px",
|
|
33
|
+
"xl": "0px",
|
|
34
|
+
"2xl": "0px",
|
|
35
|
+
"3xl": "0px",
|
|
36
|
+
"full": "0px",
|
|
37
|
+
"select": "0px"
|
|
38
|
+
},
|
|
39
|
+
"border": {
|
|
40
|
+
"width": {
|
|
41
|
+
"thin": "1px",
|
|
42
|
+
"thick": "2px",
|
|
43
|
+
"hairline": "0.5px"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"typography": {
|
|
47
|
+
"fontFamily": {
|
|
48
|
+
"serif": "Merriweather, Georgia, serif",
|
|
49
|
+
"sans": "Inter, SYSTEM-UI, sans-serif",
|
|
50
|
+
"display": "Playfair Display, serif"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"recipes": {
|
|
54
|
+
"card": {
|
|
55
|
+
"article": "bg-white border-b border-neutral-200 pb-6 mb-6 hover:opacity-80 transition-opacity cursor-pointer",
|
|
56
|
+
"feature": "bg-neutral-50 p-8 border border-neutral-900",
|
|
57
|
+
"compact": "flex gap-4 items-start border-b border-neutral-100 pb-4 mb-4"
|
|
58
|
+
},
|
|
59
|
+
"button": {
|
|
60
|
+
"primary": "bg-black text-white h-12 px-8 text-sm font-bold uppercase tracking-widest hover:bg-neutral-800 transition-colors rounded-none",
|
|
61
|
+
"secondary": "bg-white text-black border border-black h-12 px-8 text-sm font-bold uppercase tracking-widest hover:bg-neutral-50 transition-colors rounded-none",
|
|
62
|
+
"ghost": "text-neutral-900 hover:text-black font-bold uppercase tracking-widest text-[10px]"
|
|
63
|
+
},
|
|
64
|
+
"input": {
|
|
65
|
+
"search": "w-full border-b border-neutral-300 py-3 text-lg font-serif placeholder:font-sans placeholder:text-neutral-400 focus:outline-none focus:border-black transition-colors bg-transparent"
|
|
66
|
+
},
|
|
67
|
+
"typography": {
|
|
68
|
+
"h1": "font-serif text-5xl md:text-7xl font-bold leading-tight tracking-tight text-neutral-900",
|
|
69
|
+
"h2": "font-serif text-3xl md:text-4xl font-bold leading-tight text-neutral-900",
|
|
70
|
+
"h3": "font-sans text-sm font-bold uppercase tracking-widest text-neutral-900 mb-2",
|
|
71
|
+
"body": "font-serif text-lg leading-relaxed text-neutral-700",
|
|
72
|
+
"caption": "font-sans text-sm text-neutral-500 uppercase tracking-wider"
|
|
73
|
+
},
|
|
74
|
+
"layout": {
|
|
75
|
+
"section": "py-16 md:py-24 border-b border-neutral-900",
|
|
76
|
+
"grid": "grid grid-cols-1 md:grid-cols-12 gap-x-8 gap-y-12"
|
|
77
|
+
},
|
|
78
|
+
"avatar": {
|
|
79
|
+
"default": "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-none"
|
|
80
|
+
},
|
|
81
|
+
"checkbox": {
|
|
82
|
+
"default": "peer h-4 w-4 shrink-0 rounded-none border border-neutral-200 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
|
|
83
|
+
},
|
|
84
|
+
"progress": {
|
|
85
|
+
"default": "relative h-4 w-full overflow-hidden rounded-none bg-secondary",
|
|
86
|
+
"indicator": "h-full w-full flex-1 bg-primary transition-all"
|
|
87
|
+
},
|
|
88
|
+
"slider": {
|
|
89
|
+
"default": "relative flex w-full touch-none select-none items-center",
|
|
90
|
+
"track": "relative h-2 w-full grow overflow-hidden rounded-none bg-secondary",
|
|
91
|
+
"range": "absolute h-full bg-primary",
|
|
92
|
+
"thumb": "block h-5 w-5 rounded-none border border-neutral-200 bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
93
|
+
},
|
|
94
|
+
"modal": {
|
|
95
|
+
"overlay": "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
|
|
96
|
+
"content": "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white border border-neutral-200 rounded-none shadow-md p-6"
|
|
97
|
+
},
|
|
98
|
+
"dropdown": {
|
|
99
|
+
"content": "z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-none shadow-md p-1",
|
|
100
|
+
"item": "relative flex cursor-default select-none items-center rounded-none px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
|
|
101
|
+
},
|
|
102
|
+
"form": {
|
|
103
|
+
"item": "space-y-2",
|
|
104
|
+
"label": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ",
|
|
105
|
+
"message": "text-[0.8rem] font-medium text-destructive"
|
|
106
|
+
},
|
|
107
|
+
"image": {
|
|
108
|
+
"default": "overflow-hidden rounded-none"
|
|
109
|
+
},
|
|
110
|
+
"radio": {
|
|
111
|
+
"default": "aspect-square h-4 w-4 rounded-full border border-neutral-200 text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
112
|
+
},
|
|
113
|
+
"textarea": {
|
|
114
|
+
"default": "flex min-h-[80px] w-full rounded-none border border-neutral-200 bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
115
|
+
},
|
|
116
|
+
"skeleton": {
|
|
117
|
+
"default": "animate-pulse rounded-none bg-muted"
|
|
118
|
+
},
|
|
119
|
+
"scroll-area": {
|
|
120
|
+
"default": "relative overflow-hidden",
|
|
121
|
+
"scrollbar": "flex h-full w-2.5 border-l border-l-transparent p-[1px]"
|
|
122
|
+
},
|
|
123
|
+
"select": {
|
|
124
|
+
"trigger": "flex h-10 w-full items-center justify-between rounded-none border border-neutral-200 bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
125
|
+
"content": "relative z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-none shadow-md"
|
|
126
|
+
},
|
|
127
|
+
"label": {
|
|
128
|
+
"default": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 "
|
|
129
|
+
},
|
|
130
|
+
"separator": {
|
|
131
|
+
"default": "shrink-0 bg-border",
|
|
132
|
+
"horizontal": "h-[1px] w-full",
|
|
133
|
+
"vertical": "h-full w-[1px]"
|
|
134
|
+
},
|
|
135
|
+
"alert-dialog": {
|
|
136
|
+
"content": "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white border border-neutral-200 rounded-none shadow-md p-6"
|
|
137
|
+
},
|
|
138
|
+
"popover": {
|
|
139
|
+
"content": "z-50 w-72 bg-white border border-neutral-200 rounded-none shadow-md p-4 outline-none"
|
|
140
|
+
},
|
|
141
|
+
"hover-card": {
|
|
142
|
+
"content": "z-50 w-64 bg-white border border-neutral-200 rounded-none shadow-md p-4 outline-none"
|
|
143
|
+
},
|
|
144
|
+
"tooltip": {
|
|
145
|
+
"content": "z-50 overflow-hidden rounded-none bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95"
|
|
146
|
+
},
|
|
147
|
+
"sheet": {
|
|
148
|
+
"content": "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500"
|
|
149
|
+
},
|
|
150
|
+
"toast": {
|
|
151
|
+
"default": "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden p-6 pr-8 shadow-lg transition-all bg-white border border-neutral-200 rounded-none shadow-md"
|
|
152
|
+
},
|
|
153
|
+
"sidebar": {
|
|
154
|
+
"default": "flex h-full w-64 flex-col overflow-y-auto bg-background border border-neutral-200 pb-4"
|
|
155
|
+
},
|
|
156
|
+
"navigation-menu": {
|
|
157
|
+
"list": "group flex flex-1 list-none items-center justify-center space-x-1",
|
|
158
|
+
"trigger": "group inline-flex h-10 w-max items-center justify-center rounded-none bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50"
|
|
159
|
+
},
|
|
160
|
+
"breadcrumb": {
|
|
161
|
+
"list": "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
162
|
+
"item": "inline-flex items-center gap-1.5",
|
|
163
|
+
"link": "transition-colors hover:text-foreground"
|
|
164
|
+
},
|
|
165
|
+
"command": {
|
|
166
|
+
"default": "flex h-full w-full flex-col overflow-hidden bg-white border border-neutral-200 rounded-none shadow-md",
|
|
167
|
+
"input": "flex h-11 w-full rounded-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
|
168
|
+
},
|
|
169
|
+
"calendar": {
|
|
170
|
+
"default": "p-3 bg-white border border-neutral-200 rounded-none shadow-md",
|
|
171
|
+
"cell": "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
|
|
172
|
+
"day": "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-none"
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
"semantic": {
|
|
177
|
+
"background": {
|
|
178
|
+
"canvas": "bg-white",
|
|
179
|
+
"surface": "bg-white",
|
|
180
|
+
"subtle": "bg-neutral-50"
|
|
181
|
+
},
|
|
182
|
+
"border": {
|
|
183
|
+
"default": "border-neutral-200",
|
|
184
|
+
"strong": "border-neutral-900",
|
|
185
|
+
"divider": "border-b border-neutral-200"
|
|
186
|
+
},
|
|
187
|
+
"text": {
|
|
188
|
+
"primary": "text-black",
|
|
189
|
+
"secondary": "text-neutral-600",
|
|
190
|
+
"accent": "text-red-700 font-bold"
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|