@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,321 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "minimal-workspace",
|
|
3
|
+
"name": "Minimal Workspace",
|
|
4
|
+
"schemaVersion": "2.1",
|
|
5
|
+
"brandTone": "neutral",
|
|
6
|
+
"designDNA": {
|
|
7
|
+
"moodKeywords": [
|
|
8
|
+
"standard",
|
|
9
|
+
"robust",
|
|
10
|
+
"clean",
|
|
11
|
+
"accessible"
|
|
12
|
+
],
|
|
13
|
+
"targetEmotion": "confidence",
|
|
14
|
+
"visualAtmosphere": "modern saas dashboard",
|
|
15
|
+
"principles": [
|
|
16
|
+
"Content defines structure (Subtle Borders)",
|
|
17
|
+
"Standardized Radius (0.5rem / 8px)",
|
|
18
|
+
"Zinc Palette (Neutral & Professional)"
|
|
19
|
+
]
|
|
20
|
+
},
|
|
21
|
+
"tokens": {
|
|
22
|
+
"atomic": {
|
|
23
|
+
"color": {
|
|
24
|
+
"brand": {
|
|
25
|
+
"50": {
|
|
26
|
+
"l": 0.98,
|
|
27
|
+
"c": 0,
|
|
28
|
+
"h": 240
|
|
29
|
+
},
|
|
30
|
+
"100": {
|
|
31
|
+
"l": 0.96,
|
|
32
|
+
"c": 0.01,
|
|
33
|
+
"h": 240
|
|
34
|
+
},
|
|
35
|
+
"200": {
|
|
36
|
+
"l": 0.9,
|
|
37
|
+
"c": 0.02,
|
|
38
|
+
"h": 240
|
|
39
|
+
},
|
|
40
|
+
"300": {
|
|
41
|
+
"l": 0.8,
|
|
42
|
+
"c": 0.03,
|
|
43
|
+
"h": 240
|
|
44
|
+
},
|
|
45
|
+
"400": {
|
|
46
|
+
"l": 0.6,
|
|
47
|
+
"c": 0.04,
|
|
48
|
+
"h": 240
|
|
49
|
+
},
|
|
50
|
+
"500": {
|
|
51
|
+
"l": 0.4,
|
|
52
|
+
"c": 0.04,
|
|
53
|
+
"h": 240
|
|
54
|
+
},
|
|
55
|
+
"600": {
|
|
56
|
+
"l": 0.3,
|
|
57
|
+
"c": 0.04,
|
|
58
|
+
"h": 240
|
|
59
|
+
},
|
|
60
|
+
"700": {
|
|
61
|
+
"l": 0.2,
|
|
62
|
+
"c": 0.04,
|
|
63
|
+
"h": 240
|
|
64
|
+
},
|
|
65
|
+
"800": {
|
|
66
|
+
"l": 0.15,
|
|
67
|
+
"c": 0.04,
|
|
68
|
+
"h": 240
|
|
69
|
+
},
|
|
70
|
+
"900": {
|
|
71
|
+
"l": 0.09,
|
|
72
|
+
"c": 0.04,
|
|
73
|
+
"h": 240
|
|
74
|
+
},
|
|
75
|
+
"950": {
|
|
76
|
+
"l": 0.04,
|
|
77
|
+
"c": 0.04,
|
|
78
|
+
"h": 240
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"neutral": {
|
|
82
|
+
"50": {
|
|
83
|
+
"l": 0.98,
|
|
84
|
+
"c": 0.005,
|
|
85
|
+
"h": 240
|
|
86
|
+
},
|
|
87
|
+
"100": {
|
|
88
|
+
"l": 0.96,
|
|
89
|
+
"c": 0.01,
|
|
90
|
+
"h": 240
|
|
91
|
+
},
|
|
92
|
+
"200": {
|
|
93
|
+
"l": 0.92,
|
|
94
|
+
"c": 0.02,
|
|
95
|
+
"h": 240
|
|
96
|
+
},
|
|
97
|
+
"300": {
|
|
98
|
+
"l": 0.87,
|
|
99
|
+
"c": 0.03,
|
|
100
|
+
"h": 240
|
|
101
|
+
},
|
|
102
|
+
"400": {
|
|
103
|
+
"l": 0.66,
|
|
104
|
+
"c": 0.04,
|
|
105
|
+
"h": 240
|
|
106
|
+
},
|
|
107
|
+
"500": {
|
|
108
|
+
"l": 0.45,
|
|
109
|
+
"c": 0.04,
|
|
110
|
+
"h": 240
|
|
111
|
+
},
|
|
112
|
+
"600": {
|
|
113
|
+
"l": 0.32,
|
|
114
|
+
"c": 0.04,
|
|
115
|
+
"h": 240
|
|
116
|
+
},
|
|
117
|
+
"700": {
|
|
118
|
+
"l": 0.25,
|
|
119
|
+
"c": 0.04,
|
|
120
|
+
"h": 240
|
|
121
|
+
},
|
|
122
|
+
"800": {
|
|
123
|
+
"l": 0.15,
|
|
124
|
+
"c": 0.04,
|
|
125
|
+
"h": 240
|
|
126
|
+
},
|
|
127
|
+
"900": {
|
|
128
|
+
"l": 0.09,
|
|
129
|
+
"c": 0.04,
|
|
130
|
+
"h": 240
|
|
131
|
+
},
|
|
132
|
+
"950": {
|
|
133
|
+
"l": 0.05,
|
|
134
|
+
"c": 0.04,
|
|
135
|
+
"h": 240
|
|
136
|
+
},
|
|
137
|
+
"white": {
|
|
138
|
+
"l": 1,
|
|
139
|
+
"c": 0,
|
|
140
|
+
"h": 0
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
"radius": {
|
|
145
|
+
"sm": "calc(0.5rem - 2px)",
|
|
146
|
+
"md": "calc(0.5rem - 2px)",
|
|
147
|
+
"lg": "0.5rem",
|
|
148
|
+
"xl": "0.75rem",
|
|
149
|
+
"full": "9999px",
|
|
150
|
+
"select": "calc(0.5rem - 2px)"
|
|
151
|
+
},
|
|
152
|
+
"spacing": {
|
|
153
|
+
"2": "0.5rem",
|
|
154
|
+
"4": "1rem",
|
|
155
|
+
"6": "1.5rem",
|
|
156
|
+
"8": "2rem",
|
|
157
|
+
"12": "3rem"
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
"semantic": {
|
|
161
|
+
"background": {
|
|
162
|
+
"canvas": "atomic.color.neutral.white",
|
|
163
|
+
"surface": {
|
|
164
|
+
"default": "atomic.color.neutral.white",
|
|
165
|
+
"subtle": "atomic.color.neutral.50",
|
|
166
|
+
"popover": "atomic.color.neutral.white"
|
|
167
|
+
},
|
|
168
|
+
"brand": {
|
|
169
|
+
"default": "atomic.color.neutral.900",
|
|
170
|
+
"subtle": "atomic.color.neutral.100"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
"text": {
|
|
174
|
+
"primary": "atomic.color.neutral.950",
|
|
175
|
+
"secondary": "atomic.color.neutral.500",
|
|
176
|
+
"muted": "atomic.color.neutral.400",
|
|
177
|
+
"inverted": "atomic.color.neutral.50"
|
|
178
|
+
},
|
|
179
|
+
"border": {
|
|
180
|
+
"default": "atomic.color.neutral.200",
|
|
181
|
+
"input": "atomic.color.neutral.200"
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
"recipes": {
|
|
185
|
+
"card": {
|
|
186
|
+
"default": "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow-sm",
|
|
187
|
+
"header": "flex flex-col space-y-1.5 p-6",
|
|
188
|
+
"title": "text-2xl font-semibold leading-none tracking-tight",
|
|
189
|
+
"description": "text-sm text-neutral-500",
|
|
190
|
+
"content": "p-6 pt-0"
|
|
191
|
+
},
|
|
192
|
+
"button": {
|
|
193
|
+
"primary": "inline-flex items-center justify-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50 shadow hover:bg-neutral-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 transition-colors",
|
|
194
|
+
"secondary": "inline-flex items-center justify-center rounded-md bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-900 shadow-sm hover:bg-neutral-100/80 transition-colors",
|
|
195
|
+
"outline": "inline-flex items-center justify-center rounded-md border border-neutral-200 bg-white px-4 py-2 text-sm font-medium shadow-sm hover:bg-neutral-100 hover:text-neutral-900 transition-colors",
|
|
196
|
+
"ghost": "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
|
|
197
|
+
},
|
|
198
|
+
"input": {
|
|
199
|
+
"default": "flex h-10 w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
200
|
+
},
|
|
201
|
+
"badge": {
|
|
202
|
+
"default": "inline-flex items-center rounded-full border border-transparent bg-neutral-900 px-2.5 py-0.5 text-xs font-semibold text-neutral-50 shadow hover:bg-neutral-900/80 transition-colors",
|
|
203
|
+
"secondary": "inline-flex items-center rounded-full border border-transparent bg-neutral-100 px-2.5 py-0.5 text-xs font-semibold text-neutral-900 hover:bg-neutral-100/80 transition-colors",
|
|
204
|
+
"outline": "inline-flex items-center rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs font-semibold text-neutral-950 transition-colors"
|
|
205
|
+
},
|
|
206
|
+
"table": {
|
|
207
|
+
"wrapper": "relative w-full overflow-auto",
|
|
208
|
+
"root": "w-full caption-bottom text-sm",
|
|
209
|
+
"header": "[&_tr]:border-b",
|
|
210
|
+
"row": "border-b border-neutral-200 transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100",
|
|
211
|
+
"head": "h-12 px-4 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0",
|
|
212
|
+
"cell": "p-4 align-middle [&:has([role=checkbox])]:pr-0"
|
|
213
|
+
},
|
|
214
|
+
"typography": {
|
|
215
|
+
"h1": "scroll-m-20 text-4xl font-semibold tracking-tight text-neutral-900 lg:text-5xl",
|
|
216
|
+
"h2": "scroll-m-20 border-b border-neutral-200 pb-2 text-3xl font-semibold tracking-tight text-neutral-900 first:mt-0",
|
|
217
|
+
"h3": "scroll-m-20 text-2xl font-semibold tracking-tight text-neutral-900",
|
|
218
|
+
"h4": "scroll-m-20 text-xl font-semibold tracking-tight text-neutral-900",
|
|
219
|
+
"p": "leading-7 [&:not(:first-child)]:mt-6",
|
|
220
|
+
"blockquote": "mt-6 border-l-2 border-neutral-200 pl-6 italic",
|
|
221
|
+
"list": "my-6 ml-6 list-disc [&>li]:mt-2"
|
|
222
|
+
},
|
|
223
|
+
"avatar": {
|
|
224
|
+
"default": "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md"
|
|
225
|
+
},
|
|
226
|
+
"checkbox": {
|
|
227
|
+
"default": "peer h-4 w-4 shrink-0 rounded-md 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"
|
|
228
|
+
},
|
|
229
|
+
"progress": {
|
|
230
|
+
"default": "relative h-4 w-full overflow-hidden rounded-md bg-secondary",
|
|
231
|
+
"indicator": "h-full w-full flex-1 bg-primary transition-all"
|
|
232
|
+
},
|
|
233
|
+
"slider": {
|
|
234
|
+
"default": "relative flex w-full touch-none select-none items-center",
|
|
235
|
+
"track": "relative h-2 w-full grow overflow-hidden rounded-md bg-secondary",
|
|
236
|
+
"range": "absolute h-full bg-primary",
|
|
237
|
+
"thumb": "block h-5 w-5 rounded-md 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"
|
|
238
|
+
},
|
|
239
|
+
"modal": {
|
|
240
|
+
"overlay": "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
|
|
241
|
+
"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-md shadow-md p-6"
|
|
242
|
+
},
|
|
243
|
+
"dropdown": {
|
|
244
|
+
"content": "z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-md shadow-md p-1",
|
|
245
|
+
"item": "relative flex cursor-default select-none items-center rounded-md 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"
|
|
246
|
+
},
|
|
247
|
+
"form": {
|
|
248
|
+
"item": "space-y-2",
|
|
249
|
+
"label": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ",
|
|
250
|
+
"message": "text-[0.8rem] font-medium text-destructive"
|
|
251
|
+
},
|
|
252
|
+
"image": {
|
|
253
|
+
"default": "overflow-hidden rounded-md"
|
|
254
|
+
},
|
|
255
|
+
"radio": {
|
|
256
|
+
"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"
|
|
257
|
+
},
|
|
258
|
+
"textarea": {
|
|
259
|
+
"default": "flex min-h-[80px] w-full rounded-md 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"
|
|
260
|
+
},
|
|
261
|
+
"skeleton": {
|
|
262
|
+
"default": "animate-pulse rounded-md bg-muted"
|
|
263
|
+
},
|
|
264
|
+
"scroll-area": {
|
|
265
|
+
"default": "relative overflow-hidden",
|
|
266
|
+
"scrollbar": "flex h-full w-2.5 border-l border-l-transparent p-[1px]"
|
|
267
|
+
},
|
|
268
|
+
"select": {
|
|
269
|
+
"trigger": "flex h-10 w-full items-center justify-between rounded-md 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",
|
|
270
|
+
"content": "relative z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-md shadow-md"
|
|
271
|
+
},
|
|
272
|
+
"label": {
|
|
273
|
+
"default": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 "
|
|
274
|
+
},
|
|
275
|
+
"separator": {
|
|
276
|
+
"default": "shrink-0 bg-border",
|
|
277
|
+
"horizontal": "h-[1px] w-full",
|
|
278
|
+
"vertical": "h-full w-[1px]"
|
|
279
|
+
},
|
|
280
|
+
"alert-dialog": {
|
|
281
|
+
"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-md shadow-md p-6"
|
|
282
|
+
},
|
|
283
|
+
"popover": {
|
|
284
|
+
"content": "z-50 w-72 bg-white border border-neutral-200 rounded-md shadow-md p-4 outline-none"
|
|
285
|
+
},
|
|
286
|
+
"hover-card": {
|
|
287
|
+
"content": "z-50 w-64 bg-white border border-neutral-200 rounded-md shadow-md p-4 outline-none"
|
|
288
|
+
},
|
|
289
|
+
"tooltip": {
|
|
290
|
+
"content": "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95"
|
|
291
|
+
},
|
|
292
|
+
"sheet": {
|
|
293
|
+
"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"
|
|
294
|
+
},
|
|
295
|
+
"toast": {
|
|
296
|
+
"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-md shadow-md"
|
|
297
|
+
},
|
|
298
|
+
"sidebar": {
|
|
299
|
+
"default": "flex h-full w-64 flex-col overflow-y-auto bg-background border border-neutral-200 pb-4"
|
|
300
|
+
},
|
|
301
|
+
"navigation-menu": {
|
|
302
|
+
"list": "group flex flex-1 list-none items-center justify-center space-x-1",
|
|
303
|
+
"trigger": "group inline-flex h-10 w-max items-center justify-center rounded-md 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"
|
|
304
|
+
},
|
|
305
|
+
"breadcrumb": {
|
|
306
|
+
"list": "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
307
|
+
"item": "inline-flex items-center gap-1.5",
|
|
308
|
+
"link": "transition-colors hover:text-foreground"
|
|
309
|
+
},
|
|
310
|
+
"command": {
|
|
311
|
+
"default": "flex h-full w-full flex-col overflow-hidden bg-white border border-neutral-200 rounded-md shadow-md",
|
|
312
|
+
"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"
|
|
313
|
+
},
|
|
314
|
+
"calendar": {
|
|
315
|
+
"default": "p-3 bg-white border border-neutral-200 rounded-md shadow-md",
|
|
316
|
+
"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",
|
|
317
|
+
"day": "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-md"
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
}
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "neutral-workspace",
|
|
3
|
+
"name": "Neutral Workspace",
|
|
4
|
+
"schemaVersion": "2.1",
|
|
5
|
+
"brandTone": "professional",
|
|
6
|
+
"designDNA": {
|
|
7
|
+
"moodKeywords": [
|
|
8
|
+
"clean",
|
|
9
|
+
"accessible",
|
|
10
|
+
"subtle",
|
|
11
|
+
"organized",
|
|
12
|
+
"warm"
|
|
13
|
+
],
|
|
14
|
+
"targetEmotion": "trust",
|
|
15
|
+
"visualAtmosphere": "modern productivity",
|
|
16
|
+
"principles": [
|
|
17
|
+
"Friendly but professional geometry (Radius 8-12px)",
|
|
18
|
+
"Warm neutral palette for eye comfort",
|
|
19
|
+
"Focus on content over decoration"
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
"tokens": {
|
|
23
|
+
"atomic": {
|
|
24
|
+
"color": {
|
|
25
|
+
"brand": {
|
|
26
|
+
"100": {
|
|
27
|
+
"l": 0.88,
|
|
28
|
+
"c": 0.06,
|
|
29
|
+
"h": 32
|
|
30
|
+
},
|
|
31
|
+
"500": {
|
|
32
|
+
"l": 0.55,
|
|
33
|
+
"c": 0.18,
|
|
34
|
+
"h": 32
|
|
35
|
+
},
|
|
36
|
+
"700": {
|
|
37
|
+
"l": 0.42,
|
|
38
|
+
"c": 0.2,
|
|
39
|
+
"h": 32
|
|
40
|
+
},
|
|
41
|
+
"900": {
|
|
42
|
+
"l": 0.18,
|
|
43
|
+
"c": 0.06,
|
|
44
|
+
"h": 32
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"neutral": {
|
|
48
|
+
"50": {
|
|
49
|
+
"l": 0.97,
|
|
50
|
+
"c": 0.02,
|
|
51
|
+
"h": 55
|
|
52
|
+
},
|
|
53
|
+
"100": {
|
|
54
|
+
"l": 0.95,
|
|
55
|
+
"c": 0.03,
|
|
56
|
+
"h": 55
|
|
57
|
+
},
|
|
58
|
+
"200": {
|
|
59
|
+
"l": 0.91,
|
|
60
|
+
"c": 0.03,
|
|
61
|
+
"h": 55
|
|
62
|
+
},
|
|
63
|
+
"300": {
|
|
64
|
+
"l": 0.86,
|
|
65
|
+
"c": 0.03,
|
|
66
|
+
"h": 55
|
|
67
|
+
},
|
|
68
|
+
"400": {
|
|
69
|
+
"l": 0.72,
|
|
70
|
+
"c": 0.02,
|
|
71
|
+
"h": 55
|
|
72
|
+
},
|
|
73
|
+
"500": {
|
|
74
|
+
"l": 0.58,
|
|
75
|
+
"c": 0.02,
|
|
76
|
+
"h": 55
|
|
77
|
+
},
|
|
78
|
+
"600": {
|
|
79
|
+
"l": 0.42,
|
|
80
|
+
"c": 0.02,
|
|
81
|
+
"h": 55
|
|
82
|
+
},
|
|
83
|
+
"700": {
|
|
84
|
+
"l": 0.32,
|
|
85
|
+
"c": 0.02,
|
|
86
|
+
"h": 55
|
|
87
|
+
},
|
|
88
|
+
"800": {
|
|
89
|
+
"l": 0.18,
|
|
90
|
+
"c": 0.01,
|
|
91
|
+
"h": 55
|
|
92
|
+
},
|
|
93
|
+
"900": {
|
|
94
|
+
"l": 0.12,
|
|
95
|
+
"c": 0.01,
|
|
96
|
+
"h": 55
|
|
97
|
+
},
|
|
98
|
+
"950": {
|
|
99
|
+
"l": 0.06,
|
|
100
|
+
"c": 0.01,
|
|
101
|
+
"h": 55
|
|
102
|
+
},
|
|
103
|
+
"white": {
|
|
104
|
+
"l": 0.99,
|
|
105
|
+
"c": 0.01,
|
|
106
|
+
"h": 55
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
"spacing": {
|
|
111
|
+
"0": "0",
|
|
112
|
+
"1": "4px",
|
|
113
|
+
"2": "8px",
|
|
114
|
+
"3": "12px",
|
|
115
|
+
"4": "16px",
|
|
116
|
+
"5": "20px",
|
|
117
|
+
"6": "24px",
|
|
118
|
+
"8": "32px",
|
|
119
|
+
"10": "40px",
|
|
120
|
+
"12": "48px",
|
|
121
|
+
"16": "64px",
|
|
122
|
+
"20": "80px",
|
|
123
|
+
"24": "96px"
|
|
124
|
+
},
|
|
125
|
+
"radius": {
|
|
126
|
+
"sm": "6px",
|
|
127
|
+
"md": "8px",
|
|
128
|
+
"lg": "12px",
|
|
129
|
+
"xl": "16px",
|
|
130
|
+
"none": "0",
|
|
131
|
+
"full": "9999px",
|
|
132
|
+
"select": "8px"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
"semantic": {
|
|
136
|
+
"background": {
|
|
137
|
+
"canvas": "atomic.color.neutral.50",
|
|
138
|
+
"surface": {
|
|
139
|
+
"subtle": "atomic.color.neutral.100",
|
|
140
|
+
"default": "atomic.color.neutral.white",
|
|
141
|
+
"emphasis": "atomic.color.neutral.200"
|
|
142
|
+
},
|
|
143
|
+
"brand": {
|
|
144
|
+
"subtle": "atomic.color.brand.100",
|
|
145
|
+
"default": "atomic.color.brand.500",
|
|
146
|
+
"emphasis": "atomic.color.brand.700"
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
"border": {
|
|
150
|
+
"default": {
|
|
151
|
+
"subtle": "atomic.color.neutral.100",
|
|
152
|
+
"default": "atomic.color.neutral.200",
|
|
153
|
+
"emphasis": "atomic.color.neutral.300"
|
|
154
|
+
},
|
|
155
|
+
"focus": "atomic.color.neutral.800"
|
|
156
|
+
},
|
|
157
|
+
"text": {
|
|
158
|
+
"primary": "atomic.color.neutral.900",
|
|
159
|
+
"secondary": "atomic.color.neutral.600",
|
|
160
|
+
"tertiary": "atomic.color.neutral.400",
|
|
161
|
+
"inverted": "atomic.color.neutral.white",
|
|
162
|
+
"link": "atomic.color.brand.700"
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
"recipes": {
|
|
166
|
+
"card": {
|
|
167
|
+
"default": "bg-[var(--tekton-bg-surface)] border border-[var(--tekton-border-default)] rounded-xl shadow-sm hover:shadow-md hover:border-[var(--tekton-border-emphasis)] transition-all",
|
|
168
|
+
"flat": "bg-[var(--tekton-bg-canvas)] rounded-xl",
|
|
169
|
+
"outlined": "bg-transparent border border-[var(--tekton-border-default)] rounded-xl",
|
|
170
|
+
"feature": "bg-[var(--tekton-bg-surface)] border border-[var(--tekton-bg-canvas)] rounded-2xl shadow-[0_4px_24px_rgba(0,0,0,0.04)]"
|
|
171
|
+
},
|
|
172
|
+
"button": {
|
|
173
|
+
"primary": "bg-[var(--tekton-text-primary)] text-[var(--tekton-bg-surface)] hover:bg-[var(--tekton-bg-canvas-950,#0a0a0a)] rounded-lg h-10 px-4 text-sm font-medium transition-colors",
|
|
174
|
+
"secondary": "bg-[var(--tekton-bg-surface)] text-[var(--tekton-text-primary)] border border-[var(--tekton-border-default)] hover:bg-[var(--tekton-bg-canvas)] rounded-lg h-10 px-4 text-sm font-medium transition-colors",
|
|
175
|
+
"ghost": "text-[var(--tekton-text-secondary)] hover:bg-[var(--tekton-bg-canvas)] hover:text-[var(--tekton-text-primary)] rounded-lg h-10 px-4 text-sm font-medium transition-colors",
|
|
176
|
+
"icon": "text-[var(--tekton-text-secondary)] hover:text-[var(--tekton-text-primary)] hover:bg-[var(--tekton-bg-canvas)] rounded-md p-2 transition-colors"
|
|
177
|
+
},
|
|
178
|
+
"input": {
|
|
179
|
+
"default": "w-full bg-[var(--tekton-bg-surface)] border border-[var(--tekton-border-default)] rounded-lg h-10 px-3 text-[var(--tekton-text-primary)] placeholder:text-[var(--tekton-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--tekton-bg-canvas)] focus:border-[var(--tekton-text-primary)] transition-all",
|
|
180
|
+
"search": "w-full bg-[var(--tekton-bg-canvas)] border-none rounded-lg h-10 px-10 text-[var(--tekton-text-primary)] placeholder:text-[var(--tekton-text-secondary)] focus:bg-[var(--tekton-bg-surface)] focus:ring-2 focus:ring-[var(--tekton-bg-canvas)] transition-all"
|
|
181
|
+
},
|
|
182
|
+
"badge": {
|
|
183
|
+
"neutral": "inline-flex items-center rounded-md bg-[var(--tekton-bg-canvas)] px-2 py-1 text-xs font-medium text-[var(--tekton-text-secondary)]",
|
|
184
|
+
"brand": "inline-flex items-center rounded-md bg-[var(--tekton-bg-brand-subtle)] px-2 py-1 text-xs font-medium text-[var(--tekton-text-link)]"
|
|
185
|
+
},
|
|
186
|
+
"typography": {
|
|
187
|
+
"h1": "scroll-m-20 text-3xl font-semibold tracking-tight text-[var(--tekton-text-primary)] lg:text-4xl",
|
|
188
|
+
"h2": "scroll-m-20 border-b border-border pb-2 text-2xl font-semibold tracking-tight text-[var(--tekton-text-primary)] first:mt-0",
|
|
189
|
+
"h3": "scroll-m-20 text-xl font-semibold tracking-tight text-[var(--tekton-text-primary)]",
|
|
190
|
+
"h4": "scroll-m-20 text-lg font-semibold tracking-tight text-[var(--tekton-text-primary)]",
|
|
191
|
+
"body": "font-sans text-base text-[var(--tekton-text-secondary)] leading-relaxed",
|
|
192
|
+
"caption": "font-sans text-sm text-[var(--tekton-text-tertiary)]"
|
|
193
|
+
},
|
|
194
|
+
"avatar": {
|
|
195
|
+
"root": "relative inline-flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-[var(--tekton-bg-canvas)]",
|
|
196
|
+
"fallback": "flex h-full w-full items-center justify-center rounded-full bg-[var(--tekton-bg-canvas)] text-sm font-semibold text-[var(--tekton-text-secondary)]"
|
|
197
|
+
},
|
|
198
|
+
"menu": {
|
|
199
|
+
"item": "flex w-full items-center rounded-md px-2 py-2 text-sm text-[var(--tekton-text-primary)] hover:bg-[var(--tekton-bg-canvas)] cursor-pointer"
|
|
200
|
+
},
|
|
201
|
+
"layout": {
|
|
202
|
+
"container": "max-w-5xl mx-auto px-6",
|
|
203
|
+
"sidebar": "w-64 border-r border-[var(--tekton-border-default)] bg-[var(--tekton-bg-canvas)] h-screen p-4 flex flex-col"
|
|
204
|
+
},
|
|
205
|
+
"checkbox": {
|
|
206
|
+
"default": "peer h-4 w-4 shrink-0 rounded-md 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"
|
|
207
|
+
},
|
|
208
|
+
"progress": {
|
|
209
|
+
"default": "relative h-4 w-full overflow-hidden rounded-md bg-secondary",
|
|
210
|
+
"indicator": "h-full w-full flex-1 bg-primary transition-all"
|
|
211
|
+
},
|
|
212
|
+
"slider": {
|
|
213
|
+
"default": "relative flex w-full touch-none select-none items-center",
|
|
214
|
+
"track": "relative h-2 w-full grow overflow-hidden rounded-md bg-secondary",
|
|
215
|
+
"range": "absolute h-full bg-primary",
|
|
216
|
+
"thumb": "block h-5 w-5 rounded-md 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"
|
|
217
|
+
},
|
|
218
|
+
"modal": {
|
|
219
|
+
"overlay": "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
|
|
220
|
+
"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-md shadow-md p-6"
|
|
221
|
+
},
|
|
222
|
+
"dropdown": {
|
|
223
|
+
"content": "z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-lg shadow-md p-1",
|
|
224
|
+
"item": "relative flex cursor-default select-none items-center rounded-md 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"
|
|
225
|
+
},
|
|
226
|
+
"form": {
|
|
227
|
+
"item": "space-y-2",
|
|
228
|
+
"label": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ",
|
|
229
|
+
"message": "text-[0.8rem] font-medium text-destructive"
|
|
230
|
+
},
|
|
231
|
+
"image": {
|
|
232
|
+
"default": "overflow-hidden rounded-md"
|
|
233
|
+
},
|
|
234
|
+
"radio": {
|
|
235
|
+
"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"
|
|
236
|
+
},
|
|
237
|
+
"textarea": {
|
|
238
|
+
"default": "flex min-h-[80px] w-full rounded-md 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"
|
|
239
|
+
},
|
|
240
|
+
"skeleton": {
|
|
241
|
+
"default": "animate-pulse rounded-md bg-muted"
|
|
242
|
+
},
|
|
243
|
+
"scroll-area": {
|
|
244
|
+
"default": "relative overflow-hidden",
|
|
245
|
+
"scrollbar": "flex h-full w-2.5 border-l border-l-transparent p-[1px]"
|
|
246
|
+
},
|
|
247
|
+
"select": {
|
|
248
|
+
"trigger": "flex h-10 w-full items-center justify-between rounded-lg 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",
|
|
249
|
+
"content": "relative z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-lg shadow-md"
|
|
250
|
+
},
|
|
251
|
+
"label": {
|
|
252
|
+
"default": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 "
|
|
253
|
+
},
|
|
254
|
+
"separator": {
|
|
255
|
+
"default": "shrink-0 bg-border",
|
|
256
|
+
"horizontal": "h-[1px] w-full",
|
|
257
|
+
"vertical": "h-full w-[1px]"
|
|
258
|
+
},
|
|
259
|
+
"alert-dialog": {
|
|
260
|
+
"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-md shadow-md p-6"
|
|
261
|
+
},
|
|
262
|
+
"popover": {
|
|
263
|
+
"content": "z-50 w-72 bg-white border border-neutral-200 rounded-md shadow-md p-4 outline-none"
|
|
264
|
+
},
|
|
265
|
+
"hover-card": {
|
|
266
|
+
"content": "z-50 w-64 bg-white border border-neutral-200 rounded-md shadow-md p-4 outline-none"
|
|
267
|
+
},
|
|
268
|
+
"tooltip": {
|
|
269
|
+
"content": "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95"
|
|
270
|
+
},
|
|
271
|
+
"sheet": {
|
|
272
|
+
"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"
|
|
273
|
+
},
|
|
274
|
+
"toast": {
|
|
275
|
+
"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-md shadow-md"
|
|
276
|
+
},
|
|
277
|
+
"sidebar": {
|
|
278
|
+
"default": "flex h-full w-64 flex-col overflow-y-auto bg-background border-r border-border pb-4"
|
|
279
|
+
},
|
|
280
|
+
"navigation-menu": {
|
|
281
|
+
"list": "group flex flex-1 list-none items-center justify-center space-x-1",
|
|
282
|
+
"trigger": "group inline-flex h-10 w-max items-center justify-center rounded-md 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"
|
|
283
|
+
},
|
|
284
|
+
"breadcrumb": {
|
|
285
|
+
"list": "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
286
|
+
"item": "inline-flex items-center gap-1.5",
|
|
287
|
+
"link": "transition-colors hover:text-foreground"
|
|
288
|
+
},
|
|
289
|
+
"command": {
|
|
290
|
+
"default": "flex h-full w-full flex-col overflow-hidden bg-white border border-neutral-200 rounded-md shadow-md",
|
|
291
|
+
"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"
|
|
292
|
+
},
|
|
293
|
+
"calendar": {
|
|
294
|
+
"default": "p-3 bg-white border border-neutral-200 rounded-md shadow-md",
|
|
295
|
+
"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",
|
|
296
|
+
"day": "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-md"
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
"typography": {
|
|
301
|
+
"fontFamily": {
|
|
302
|
+
"sans": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
|
303
|
+
"serif": "Merriweather, serif",
|
|
304
|
+
"mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
}
|