@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,274 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "dark-boldness",
|
|
3
|
+
"name": "Dark Boldness",
|
|
4
|
+
"schemaVersion": "2.1",
|
|
5
|
+
"brandTone": "elite",
|
|
6
|
+
"designDNA": {
|
|
7
|
+
"moodKeywords": [
|
|
8
|
+
"pitch-black",
|
|
9
|
+
"razor-sharp",
|
|
10
|
+
"elite",
|
|
11
|
+
"high-performance"
|
|
12
|
+
],
|
|
13
|
+
"targetEmotion": "ambition",
|
|
14
|
+
"visualAtmosphere": "luxury night gym",
|
|
15
|
+
"principles": [
|
|
16
|
+
"True Black (#000000) Canvas",
|
|
17
|
+
"0px Radius (Absolute Precision)",
|
|
18
|
+
"Typography as Hierarchy"
|
|
19
|
+
]
|
|
20
|
+
},
|
|
21
|
+
"tokens": {
|
|
22
|
+
"atomic": {
|
|
23
|
+
"color": {
|
|
24
|
+
"brand": {
|
|
25
|
+
"100": {
|
|
26
|
+
"l": 0.95,
|
|
27
|
+
"c": 0.05,
|
|
28
|
+
"h": 0
|
|
29
|
+
},
|
|
30
|
+
"500": {
|
|
31
|
+
"l": 1,
|
|
32
|
+
"c": 0,
|
|
33
|
+
"h": 0
|
|
34
|
+
},
|
|
35
|
+
"900": {
|
|
36
|
+
"l": 0,
|
|
37
|
+
"c": 0,
|
|
38
|
+
"h": 0
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"neutral": {
|
|
42
|
+
"100": {
|
|
43
|
+
"l": 0.9,
|
|
44
|
+
"c": 0.01,
|
|
45
|
+
"h": 0
|
|
46
|
+
},
|
|
47
|
+
"200": {
|
|
48
|
+
"l": 0.8,
|
|
49
|
+
"c": 0.01,
|
|
50
|
+
"h": 0
|
|
51
|
+
},
|
|
52
|
+
"500": {
|
|
53
|
+
"l": 0.5,
|
|
54
|
+
"c": 0.01,
|
|
55
|
+
"h": 0
|
|
56
|
+
},
|
|
57
|
+
"800": {
|
|
58
|
+
"l": 0.2,
|
|
59
|
+
"c": 0.01,
|
|
60
|
+
"h": 0
|
|
61
|
+
},
|
|
62
|
+
"900": {
|
|
63
|
+
"l": 0.1,
|
|
64
|
+
"c": 0.01,
|
|
65
|
+
"h": 0
|
|
66
|
+
},
|
|
67
|
+
"950": {
|
|
68
|
+
"l": 0.05,
|
|
69
|
+
"c": 0.01,
|
|
70
|
+
"h": 0
|
|
71
|
+
},
|
|
72
|
+
"black": {
|
|
73
|
+
"l": 0,
|
|
74
|
+
"c": 0,
|
|
75
|
+
"h": 0
|
|
76
|
+
},
|
|
77
|
+
"white": {
|
|
78
|
+
"l": 1,
|
|
79
|
+
"c": 0,
|
|
80
|
+
"h": 0
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"accent": {
|
|
84
|
+
"electricBlue": {
|
|
85
|
+
"l": 0.6,
|
|
86
|
+
"c": 0.2,
|
|
87
|
+
"h": 210
|
|
88
|
+
},
|
|
89
|
+
"kineticOrange": {
|
|
90
|
+
"l": 0.6,
|
|
91
|
+
"c": 0.2,
|
|
92
|
+
"h": 30
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
"radius": {
|
|
97
|
+
"none": "0px",
|
|
98
|
+
"sm": "0px",
|
|
99
|
+
"md": "0px",
|
|
100
|
+
"lg": "0px",
|
|
101
|
+
"xl": "0px",
|
|
102
|
+
"full": "0px",
|
|
103
|
+
"select": "0px",
|
|
104
|
+
"circle": "50%"
|
|
105
|
+
},
|
|
106
|
+
"spacing": {
|
|
107
|
+
"4": "1rem",
|
|
108
|
+
"6": "1.5rem",
|
|
109
|
+
"8": "2rem",
|
|
110
|
+
"12": "3rem",
|
|
111
|
+
"24": "6rem"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
"semantic": {
|
|
115
|
+
"background": {
|
|
116
|
+
"canvas": "atomic.color.neutral.black",
|
|
117
|
+
"surface": {
|
|
118
|
+
"subtle": "atomic.color.neutral.950",
|
|
119
|
+
"default": "atomic.color.neutral.900",
|
|
120
|
+
"emphasis": "atomic.color.neutral.800"
|
|
121
|
+
},
|
|
122
|
+
"brand": {
|
|
123
|
+
"subtle": "atomic.color.brand.100",
|
|
124
|
+
"default": "atomic.color.brand.500",
|
|
125
|
+
"emphasis": "atomic.color.brand.900"
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
"border": {
|
|
129
|
+
"default": {
|
|
130
|
+
"subtle": "atomic.color.neutral.800",
|
|
131
|
+
"default": "atomic.color.neutral.500",
|
|
132
|
+
"emphasis": "atomic.color.neutral.200"
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
"text": {
|
|
136
|
+
"primary": "atomic.color.neutral.white",
|
|
137
|
+
"secondary": "atomic.color.neutral.200",
|
|
138
|
+
"muted": "atomic.color.neutral.500"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
"recipes": {
|
|
142
|
+
"card": {
|
|
143
|
+
"glass": "bg-neutral-900/50 backdrop-blur-md border-b border-white/10",
|
|
144
|
+
"outlined": "bg-transparent border border-neutral-800",
|
|
145
|
+
"minimal": "bg-black border-none",
|
|
146
|
+
"poster": "relative w-full overflow-hidden bg-neutral-900"
|
|
147
|
+
},
|
|
148
|
+
"button": {
|
|
149
|
+
"primary": "bg-white text-black h-12 px-8 uppercase tracking-widest text-sm font-bold hover:bg-neutral-200 transition-colors rounded-none",
|
|
150
|
+
"secondary": "bg-transparent border border-white/30 text-white h-12 px-8 uppercase tracking-widest text-sm font-bold hover:bg-white/10 transition-colors rounded-none",
|
|
151
|
+
"ghost": "bg-transparent text-neutral-400 h-10 px-4 uppercase tracking-widest text-[10px] font-bold hover:text-white transition-colors rounded-none"
|
|
152
|
+
},
|
|
153
|
+
"input": {
|
|
154
|
+
"architectural": "w-full bg-transparent border-b border-neutral-800 py-4 text-white placeholder:text-neutral-600 focus:border-white focus:outline-none rounded-none transition-colors text-sm"
|
|
155
|
+
},
|
|
156
|
+
"badge": {
|
|
157
|
+
"neutral": "inline-flex items-center rounded-none border border-neutral-800 bg-neutral-900 px-2 py-0.5 text-[10px] uppercase font-bold text-neutral-400 tracking-wide",
|
|
158
|
+
"accent": "inline-flex items-center rounded-none bg-white text-black px-2 py-0.5 text-[10px] uppercase font-bold tracking-wide"
|
|
159
|
+
},
|
|
160
|
+
"typography": {
|
|
161
|
+
"h1": "font-sans text-5xl md:text-7xl font-bold uppercase tracking-tighter text-white",
|
|
162
|
+
"h2": "font-sans text-3xl md:text-4xl font-bold uppercase tracking-tight text-white",
|
|
163
|
+
"h3": "font-sans text-2xl font-bold uppercase text-white",
|
|
164
|
+
"h4": "font-sans text-xl font-bold uppercase text-white",
|
|
165
|
+
"hero": "text-5xl font-bold uppercase tracking-tighter text-white leading-none",
|
|
166
|
+
"eyebrow": "text-[10px] font-bold uppercase tracking-[0.2em] text-neutral-500 mb-2 block",
|
|
167
|
+
"body": "text-sm font-normal text-neutral-400 leading-relaxed",
|
|
168
|
+
"label": "text-xs font-bold uppercase tracking-widest text-neutral-500"
|
|
169
|
+
},
|
|
170
|
+
"layout": {
|
|
171
|
+
"section": "py-24 px-6",
|
|
172
|
+
"container": "px-6",
|
|
173
|
+
"grid": "gap-x-8 gap-y-12",
|
|
174
|
+
"stack": "flex flex-col gap-6"
|
|
175
|
+
},
|
|
176
|
+
"avatar": {
|
|
177
|
+
"default": "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-none"
|
|
178
|
+
},
|
|
179
|
+
"checkbox": {
|
|
180
|
+
"default": "peer h-4 w-4 shrink-0 rounded-none border-2 border-white 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"
|
|
181
|
+
},
|
|
182
|
+
"progress": {
|
|
183
|
+
"default": "relative h-4 w-full overflow-hidden rounded-none bg-secondary",
|
|
184
|
+
"indicator": "h-full w-full flex-1 bg-primary transition-all"
|
|
185
|
+
},
|
|
186
|
+
"slider": {
|
|
187
|
+
"default": "relative flex w-full touch-none select-none items-center",
|
|
188
|
+
"track": "relative h-2 w-full grow overflow-hidden rounded-none bg-secondary",
|
|
189
|
+
"range": "absolute h-full bg-primary",
|
|
190
|
+
"thumb": "block h-5 w-5 rounded-none border-2 border-white 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"
|
|
191
|
+
},
|
|
192
|
+
"modal": {
|
|
193
|
+
"overlay": "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
|
|
194
|
+
"content": "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] p-6"
|
|
195
|
+
},
|
|
196
|
+
"dropdown": {
|
|
197
|
+
"content": "z-50 min-w-[8rem] overflow-hidden bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] p-1",
|
|
198
|
+
"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"
|
|
199
|
+
},
|
|
200
|
+
"form": {
|
|
201
|
+
"item": "space-y-2",
|
|
202
|
+
"label": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 uppercase tracking-widest font-bold",
|
|
203
|
+
"message": "text-[0.8rem] font-medium text-destructive"
|
|
204
|
+
},
|
|
205
|
+
"image": {
|
|
206
|
+
"default": "overflow-hidden rounded-none"
|
|
207
|
+
},
|
|
208
|
+
"radio": {
|
|
209
|
+
"default": "aspect-square h-4 w-4 rounded-full border-2 border-white 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"
|
|
210
|
+
},
|
|
211
|
+
"textarea": {
|
|
212
|
+
"default": "flex min-h-[80px] w-full rounded-none border-2 border-white 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"
|
|
213
|
+
},
|
|
214
|
+
"skeleton": {
|
|
215
|
+
"default": "animate-pulse rounded-none bg-muted"
|
|
216
|
+
},
|
|
217
|
+
"scroll-area": {
|
|
218
|
+
"default": "relative overflow-hidden",
|
|
219
|
+
"scrollbar": "flex h-full w-2.5 border-l border-l-transparent p-[1px]"
|
|
220
|
+
},
|
|
221
|
+
"select": {
|
|
222
|
+
"trigger": "flex h-10 w-full items-center justify-between rounded-none border-2 border-white 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",
|
|
223
|
+
"content": "relative z-50 min-w-[8rem] overflow-hidden bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]"
|
|
224
|
+
},
|
|
225
|
+
"label": {
|
|
226
|
+
"default": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 uppercase tracking-wider font-bold"
|
|
227
|
+
},
|
|
228
|
+
"separator": {
|
|
229
|
+
"default": "shrink-0 bg-border",
|
|
230
|
+
"horizontal": "h-[1px] w-full",
|
|
231
|
+
"vertical": "h-full w-[1px]"
|
|
232
|
+
},
|
|
233
|
+
"alert-dialog": {
|
|
234
|
+
"content": "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] p-6"
|
|
235
|
+
},
|
|
236
|
+
"popover": {
|
|
237
|
+
"content": "z-50 w-72 bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] p-4 outline-none"
|
|
238
|
+
},
|
|
239
|
+
"hover-card": {
|
|
240
|
+
"content": "z-50 w-64 bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] p-4 outline-none"
|
|
241
|
+
},
|
|
242
|
+
"tooltip": {
|
|
243
|
+
"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"
|
|
244
|
+
},
|
|
245
|
+
"sheet": {
|
|
246
|
+
"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"
|
|
247
|
+
},
|
|
248
|
+
"toast": {
|
|
249
|
+
"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-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]"
|
|
250
|
+
},
|
|
251
|
+
"sidebar": {
|
|
252
|
+
"default": "flex h-full w-64 flex-col overflow-y-auto bg-background border-2 border-white pb-4"
|
|
253
|
+
},
|
|
254
|
+
"navigation-menu": {
|
|
255
|
+
"list": "group flex flex-1 list-none items-center justify-center space-x-1",
|
|
256
|
+
"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"
|
|
257
|
+
},
|
|
258
|
+
"breadcrumb": {
|
|
259
|
+
"list": "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
260
|
+
"item": "inline-flex items-center gap-1.5",
|
|
261
|
+
"link": "transition-colors hover:text-foreground"
|
|
262
|
+
},
|
|
263
|
+
"command": {
|
|
264
|
+
"default": "flex h-full w-full flex-col overflow-hidden bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]",
|
|
265
|
+
"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"
|
|
266
|
+
},
|
|
267
|
+
"calendar": {
|
|
268
|
+
"default": "p-3 bg-neutral-950 border-2 border-white rounded-none shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]",
|
|
269
|
+
"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",
|
|
270
|
+
"day": "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-none"
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
}
|
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "editorial-tech",
|
|
3
|
+
"name": "Editorial Tech",
|
|
4
|
+
"schemaVersion": "2.1",
|
|
5
|
+
"brandTone": "mono",
|
|
6
|
+
"designDNA": {
|
|
7
|
+
"moodKeywords": [
|
|
8
|
+
"lucid",
|
|
9
|
+
"airy",
|
|
10
|
+
"intellectual",
|
|
11
|
+
"rational"
|
|
12
|
+
],
|
|
13
|
+
"targetEmotion": "clarity",
|
|
14
|
+
"visualAtmosphere": "blank canvas",
|
|
15
|
+
"principles": [
|
|
16
|
+
"Airy Canvas (Generous padding, wide margins)",
|
|
17
|
+
"Typography-First Hierarchy (Big clean headings, high legibility)",
|
|
18
|
+
"Pill Accents (Buttons and tabs use max radius, containers stay rectilinear)",
|
|
19
|
+
"Pure Grayscale (Zero chroma, no color tint — mono only)"
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
"tokens": {
|
|
23
|
+
"atomic": {
|
|
24
|
+
"color": {
|
|
25
|
+
"brand": {
|
|
26
|
+
"50": {
|
|
27
|
+
"l": 0.98,
|
|
28
|
+
"c": 0,
|
|
29
|
+
"h": 0
|
|
30
|
+
},
|
|
31
|
+
"100": {
|
|
32
|
+
"l": 0.96,
|
|
33
|
+
"c": 0,
|
|
34
|
+
"h": 0
|
|
35
|
+
},
|
|
36
|
+
"200": {
|
|
37
|
+
"l": 0.9,
|
|
38
|
+
"c": 0,
|
|
39
|
+
"h": 0
|
|
40
|
+
},
|
|
41
|
+
"300": {
|
|
42
|
+
"l": 0.82,
|
|
43
|
+
"c": 0,
|
|
44
|
+
"h": 0
|
|
45
|
+
},
|
|
46
|
+
"400": {
|
|
47
|
+
"l": 0.7,
|
|
48
|
+
"c": 0,
|
|
49
|
+
"h": 0
|
|
50
|
+
},
|
|
51
|
+
"500": {
|
|
52
|
+
"l": 0.55,
|
|
53
|
+
"c": 0,
|
|
54
|
+
"h": 0
|
|
55
|
+
},
|
|
56
|
+
"600": {
|
|
57
|
+
"l": 0.4,
|
|
58
|
+
"c": 0,
|
|
59
|
+
"h": 0
|
|
60
|
+
},
|
|
61
|
+
"700": {
|
|
62
|
+
"l": 0.3,
|
|
63
|
+
"c": 0,
|
|
64
|
+
"h": 0
|
|
65
|
+
},
|
|
66
|
+
"800": {
|
|
67
|
+
"l": 0.22,
|
|
68
|
+
"c": 0,
|
|
69
|
+
"h": 0
|
|
70
|
+
},
|
|
71
|
+
"900": {
|
|
72
|
+
"l": 0.15,
|
|
73
|
+
"c": 0,
|
|
74
|
+
"h": 0
|
|
75
|
+
},
|
|
76
|
+
"950": {
|
|
77
|
+
"l": 0.1,
|
|
78
|
+
"c": 0,
|
|
79
|
+
"h": 0
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
"neutral": {
|
|
83
|
+
"50": {
|
|
84
|
+
"l": 0.99,
|
|
85
|
+
"c": 0,
|
|
86
|
+
"h": 0
|
|
87
|
+
},
|
|
88
|
+
"100": {
|
|
89
|
+
"l": 0.96,
|
|
90
|
+
"c": 0,
|
|
91
|
+
"h": 0
|
|
92
|
+
},
|
|
93
|
+
"200": {
|
|
94
|
+
"l": 0.92,
|
|
95
|
+
"c": 0,
|
|
96
|
+
"h": 0
|
|
97
|
+
},
|
|
98
|
+
"300": {
|
|
99
|
+
"l": 0.86,
|
|
100
|
+
"c": 0,
|
|
101
|
+
"h": 0
|
|
102
|
+
},
|
|
103
|
+
"400": {
|
|
104
|
+
"l": 0.74,
|
|
105
|
+
"c": 0,
|
|
106
|
+
"h": 0
|
|
107
|
+
},
|
|
108
|
+
"500": {
|
|
109
|
+
"l": 0.55,
|
|
110
|
+
"c": 0,
|
|
111
|
+
"h": 0
|
|
112
|
+
},
|
|
113
|
+
"600": {
|
|
114
|
+
"l": 0.4,
|
|
115
|
+
"c": 0,
|
|
116
|
+
"h": 0
|
|
117
|
+
},
|
|
118
|
+
"700": {
|
|
119
|
+
"l": 0.3,
|
|
120
|
+
"c": 0,
|
|
121
|
+
"h": 0
|
|
122
|
+
},
|
|
123
|
+
"800": {
|
|
124
|
+
"l": 0.22,
|
|
125
|
+
"c": 0,
|
|
126
|
+
"h": 0
|
|
127
|
+
},
|
|
128
|
+
"900": {
|
|
129
|
+
"l": 0.15,
|
|
130
|
+
"c": 0,
|
|
131
|
+
"h": 0
|
|
132
|
+
},
|
|
133
|
+
"950": {
|
|
134
|
+
"l": 0.1,
|
|
135
|
+
"c": 0,
|
|
136
|
+
"h": 0
|
|
137
|
+
},
|
|
138
|
+
"white": {
|
|
139
|
+
"l": 1,
|
|
140
|
+
"c": 0,
|
|
141
|
+
"h": 0
|
|
142
|
+
},
|
|
143
|
+
"black": {
|
|
144
|
+
"l": 0,
|
|
145
|
+
"c": 0,
|
|
146
|
+
"h": 0
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
"radius": {
|
|
151
|
+
"none": "0px",
|
|
152
|
+
"sm": "0.25rem",
|
|
153
|
+
"md": "0.5rem",
|
|
154
|
+
"lg": "0.75rem",
|
|
155
|
+
"xl": "9999px",
|
|
156
|
+
"2xl": "1.5rem",
|
|
157
|
+
"full": "9999px",
|
|
158
|
+
"select": "9999px"
|
|
159
|
+
},
|
|
160
|
+
"spacing": {
|
|
161
|
+
"2": "0.5rem",
|
|
162
|
+
"4": "1rem",
|
|
163
|
+
"6": "1.5rem",
|
|
164
|
+
"8": "2rem",
|
|
165
|
+
"10": "2.5rem",
|
|
166
|
+
"12": "3rem",
|
|
167
|
+
"16": "4rem",
|
|
168
|
+
"20": "5rem",
|
|
169
|
+
"24": "6rem",
|
|
170
|
+
"32": "8rem"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
"semantic": {
|
|
174
|
+
"background": {
|
|
175
|
+
"canvas": "atomic.color.neutral.white",
|
|
176
|
+
"surface": {
|
|
177
|
+
"default": "atomic.color.neutral.white",
|
|
178
|
+
"subtle": "atomic.color.neutral.50",
|
|
179
|
+
"popover": "atomic.color.neutral.white"
|
|
180
|
+
},
|
|
181
|
+
"brand": {
|
|
182
|
+
"default": "atomic.color.brand.950",
|
|
183
|
+
"subtle": "atomic.color.brand.50"
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
"border": {
|
|
187
|
+
"default": "atomic.color.neutral.200",
|
|
188
|
+
"input": "atomic.color.neutral.300",
|
|
189
|
+
"focus": "atomic.color.neutral.900"
|
|
190
|
+
},
|
|
191
|
+
"text": {
|
|
192
|
+
"primary": "atomic.color.neutral.950",
|
|
193
|
+
"secondary": "atomic.color.neutral.500",
|
|
194
|
+
"muted": "atomic.color.neutral.400",
|
|
195
|
+
"inverted": "atomic.color.neutral.white"
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
"recipes": {
|
|
199
|
+
"card": {
|
|
200
|
+
"default": "group flex flex-col gap-6 w-full cursor-pointer",
|
|
201
|
+
"imageWrapper": "relative aspect-[4/3] w-full overflow-hidden rounded-2xl bg-neutral-100 transition-all duration-500 group-hover:shadow-lg",
|
|
202
|
+
"image": "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105",
|
|
203
|
+
"content": "flex flex-col gap-2",
|
|
204
|
+
"title": "text-2xl font-bold tracking-tight text-neutral-950 transition-colors group-hover:text-neutral-600",
|
|
205
|
+
"description": "text-base text-neutral-500 leading-relaxed line-clamp-2"
|
|
206
|
+
},
|
|
207
|
+
"button": {
|
|
208
|
+
"primary": "inline-flex items-center justify-center rounded-full bg-neutral-950 px-6 py-3 text-sm lg:text-base font-medium text-white shadow-sm hover:bg-neutral-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 transition-colors",
|
|
209
|
+
"secondary": "inline-flex items-center justify-center rounded-full border border-neutral-200 bg-white px-6 py-3 text-sm lg:text-base font-medium text-neutral-950 shadow-sm hover:bg-neutral-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 transition-colors",
|
|
210
|
+
"ghost": "inline-flex items-center justify-center rounded-full px-6 py-3 text-sm lg:text-base font-medium text-neutral-600 hover:bg-neutral-100 hover:text-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 transition-colors",
|
|
211
|
+
"_note": "All button variants use rounded-full (pill shape). This is a core editorial-tech design decision."
|
|
212
|
+
},
|
|
213
|
+
"tab": {
|
|
214
|
+
"list": "inline-flex items-center gap-1 rounded-full bg-neutral-100 p-1",
|
|
215
|
+
"trigger": "inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-medium text-neutral-500 transition-all hover:text-neutral-950 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow-sm",
|
|
216
|
+
"_note": "Tabs use pill container (rounded-full list) with pill triggers. Active state gets white bg with shadow."
|
|
217
|
+
},
|
|
218
|
+
"input": {
|
|
219
|
+
"default": "flex h-12 w-full rounded-xl border border-neutral-300 bg-white px-4 py-2 text-base ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 transition-all",
|
|
220
|
+
"_note": "Inputs use rounded-xl (moderate radius), NOT pill. Only buttons and tabs are pill."
|
|
221
|
+
},
|
|
222
|
+
"badge": {
|
|
223
|
+
"default": "inline-flex items-center rounded-full border border-transparent bg-neutral-950 px-3 py-1 text-sm font-medium text-white hover:bg-neutral-800 transition-colors",
|
|
224
|
+
"secondary": "inline-flex items-center rounded-full border border-transparent bg-neutral-100 px-3 py-1 text-sm font-medium text-neutral-950 hover:bg-neutral-200 transition-colors",
|
|
225
|
+
"outline": "inline-flex items-center rounded-full border border-neutral-300 px-3 py-1 text-sm font-medium text-neutral-950 transition-colors"
|
|
226
|
+
},
|
|
227
|
+
"table": {
|
|
228
|
+
"wrapper": "relative w-full overflow-auto rounded-xl border border-neutral-200",
|
|
229
|
+
"root": "w-full caption-bottom text-base",
|
|
230
|
+
"header": "[&_tr]:border-b bg-neutral-50/50",
|
|
231
|
+
"row": "border-b border-neutral-200 transition-colors hover:bg-neutral-50/50 data-[state=selected]:bg-neutral-50",
|
|
232
|
+
"head": "h-14 px-6 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0",
|
|
233
|
+
"cell": "p-6 align-middle [&:has([role=checkbox])]:pr-0"
|
|
234
|
+
},
|
|
235
|
+
"typography": {
|
|
236
|
+
"h1": "scroll-m-20 text-4xl font-semibold tracking-tight text-neutral-950 lg:text-5xl",
|
|
237
|
+
"h2": "scroll-m-20 border-b border-neutral-100 pb-4 mt-16 text-3xl font-semibold tracking-tight text-neutral-950 first:mt-0",
|
|
238
|
+
"h3": "scroll-m-20 mt-12 text-2xl font-semibold tracking-tight text-neutral-950",
|
|
239
|
+
"h4": "scroll-m-20 mt-8 text-xl font-semibold tracking-tight text-neutral-950",
|
|
240
|
+
"p": "leading-relaxed text-base lg:text-lg text-neutral-600 [&:not(:first-child)]:mt-8",
|
|
241
|
+
"blockquote": "mt-8 border-l-4 border-neutral-200 pl-6 italic text-neutral-500 text-lg lg:text-xl",
|
|
242
|
+
"list": "my-8 ml-8 list-disc text-base lg:text-lg text-neutral-600 [&>li]:mt-3"
|
|
243
|
+
},
|
|
244
|
+
"layout": {
|
|
245
|
+
"container": "max-w-6xl mx-auto px-6 sm:px-8",
|
|
246
|
+
"section": "py-24 md:py-32",
|
|
247
|
+
"stack": "flex flex-col gap-10",
|
|
248
|
+
"grid": "grid gap-8 sm:grid-cols-2 lg:grid-cols-3"
|
|
249
|
+
},
|
|
250
|
+
"avatar": {
|
|
251
|
+
"default": "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-none"
|
|
252
|
+
},
|
|
253
|
+
"checkbox": {
|
|
254
|
+
"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"
|
|
255
|
+
},
|
|
256
|
+
"progress": {
|
|
257
|
+
"default": "relative h-4 w-full overflow-hidden rounded-none bg-secondary",
|
|
258
|
+
"indicator": "h-full w-full flex-1 bg-primary transition-all"
|
|
259
|
+
},
|
|
260
|
+
"slider": {
|
|
261
|
+
"default": "relative flex w-full touch-none select-none items-center",
|
|
262
|
+
"track": "relative h-2 w-full grow overflow-hidden rounded-none bg-secondary",
|
|
263
|
+
"range": "absolute h-full bg-primary",
|
|
264
|
+
"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"
|
|
265
|
+
},
|
|
266
|
+
"modal": {
|
|
267
|
+
"overlay": "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
|
|
268
|
+
"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"
|
|
269
|
+
},
|
|
270
|
+
"dropdown": {
|
|
271
|
+
"content": "z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-2xl shadow-md p-1",
|
|
272
|
+
"item": "relative flex cursor-default select-none items-center rounded-lg 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"
|
|
273
|
+
},
|
|
274
|
+
"form": {
|
|
275
|
+
"item": "space-y-2",
|
|
276
|
+
"label": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ",
|
|
277
|
+
"message": "text-[0.8rem] font-medium text-destructive"
|
|
278
|
+
},
|
|
279
|
+
"image": {
|
|
280
|
+
"default": "overflow-hidden rounded-none"
|
|
281
|
+
},
|
|
282
|
+
"radio": {
|
|
283
|
+
"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"
|
|
284
|
+
},
|
|
285
|
+
"textarea": {
|
|
286
|
+
"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"
|
|
287
|
+
},
|
|
288
|
+
"skeleton": {
|
|
289
|
+
"default": "animate-pulse rounded-none bg-muted"
|
|
290
|
+
},
|
|
291
|
+
"scroll-area": {
|
|
292
|
+
"default": "relative overflow-hidden",
|
|
293
|
+
"scrollbar": "flex h-full w-2.5 border-l border-l-transparent p-[1px]"
|
|
294
|
+
},
|
|
295
|
+
"select": {
|
|
296
|
+
"trigger": "flex h-10 w-full items-center justify-between rounded-full 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",
|
|
297
|
+
"content": "relative z-50 min-w-[8rem] overflow-hidden bg-white border border-neutral-200 rounded-2xl shadow-md"
|
|
298
|
+
},
|
|
299
|
+
"label": {
|
|
300
|
+
"default": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 "
|
|
301
|
+
},
|
|
302
|
+
"separator": {
|
|
303
|
+
"default": "shrink-0 bg-border",
|
|
304
|
+
"horizontal": "h-[1px] w-full",
|
|
305
|
+
"vertical": "h-full w-[1px]"
|
|
306
|
+
},
|
|
307
|
+
"alert-dialog": {
|
|
308
|
+
"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"
|
|
309
|
+
},
|
|
310
|
+
"popover": {
|
|
311
|
+
"content": "z-50 w-72 bg-white border border-neutral-200 rounded-none shadow-md p-4 outline-none"
|
|
312
|
+
},
|
|
313
|
+
"hover-card": {
|
|
314
|
+
"content": "z-50 w-64 bg-white border border-neutral-200 rounded-none shadow-md p-4 outline-none"
|
|
315
|
+
},
|
|
316
|
+
"tooltip": {
|
|
317
|
+
"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"
|
|
318
|
+
},
|
|
319
|
+
"sheet": {
|
|
320
|
+
"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"
|
|
321
|
+
},
|
|
322
|
+
"toast": {
|
|
323
|
+
"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"
|
|
324
|
+
},
|
|
325
|
+
"sidebar": {
|
|
326
|
+
"default": "flex h-full w-64 flex-col overflow-y-auto bg-background border border-neutral-200 pb-4"
|
|
327
|
+
},
|
|
328
|
+
"navigation-menu": {
|
|
329
|
+
"list": "group flex flex-1 list-none items-center justify-center space-x-1",
|
|
330
|
+
"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"
|
|
331
|
+
},
|
|
332
|
+
"breadcrumb": {
|
|
333
|
+
"list": "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
|
334
|
+
"item": "inline-flex items-center gap-1.5",
|
|
335
|
+
"link": "transition-colors hover:text-foreground"
|
|
336
|
+
},
|
|
337
|
+
"command": {
|
|
338
|
+
"default": "flex h-full w-full flex-col overflow-hidden bg-white border border-neutral-200 rounded-none shadow-md",
|
|
339
|
+
"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"
|
|
340
|
+
},
|
|
341
|
+
"calendar": {
|
|
342
|
+
"default": "p-3 bg-white border border-neutral-200 rounded-none shadow-md",
|
|
343
|
+
"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",
|
|
344
|
+
"day": "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-none"
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
}
|