@farming-labs/theme 0.0.2-beta.18 → 0.0.2-beta.20

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.
@@ -0,0 +1,569 @@
1
+ /* @farming-labs/theme — darkbold theme CSS
2
+ * Pure monochrome design, clean typography, Geist font, no accent colors.
3
+ */
4
+ @import "./presets/neutral.css";
5
+
6
+ /* ─── DarkBold color overrides ──────────────────────────────────── */
7
+
8
+ :root {
9
+ --color-fd-primary: #000;
10
+ --color-fd-primary-foreground: #fff;
11
+ --color-fd-ring: #000;
12
+
13
+ --color-fd-background: #fff;
14
+ --color-fd-foreground: #111;
15
+ --color-fd-card: #fff;
16
+ --color-fd-card-foreground: #111;
17
+ --color-fd-popover: #fff;
18
+ --color-fd-popover-foreground: #111;
19
+ --color-fd-secondary: #fafafa;
20
+ --color-fd-secondary-foreground: #111;
21
+ --color-fd-muted: #fafafa;
22
+ --color-fd-muted-foreground: #666;
23
+ --color-fd-accent: #f5f5f5;
24
+ --color-fd-accent-foreground: #111;
25
+ --color-fd-border: #eaeaea;
26
+ }
27
+
28
+ .dark {
29
+ --color-fd-primary: #fff;
30
+ --color-fd-primary-foreground: #000;
31
+ --color-fd-ring: #fff;
32
+
33
+ --color-fd-background: #0a0a0a;
34
+ --color-fd-foreground: #ededed;
35
+ --color-fd-card: #111;
36
+ --color-fd-card-foreground: #ededed;
37
+ --color-fd-popover: #111;
38
+ --color-fd-popover-foreground: #ededed;
39
+ --color-fd-secondary: #1a1a1a;
40
+ --color-fd-secondary-foreground: #ededed;
41
+ --color-fd-muted: #1a1a1a;
42
+ --color-fd-muted-foreground: #888;
43
+ --color-fd-accent: #1a1a1a;
44
+ --color-fd-accent-foreground: #ededed;
45
+ --color-fd-border: #333;
46
+ }
47
+
48
+ /* ─── Typography — Geist-inspired, DarkBold exact values ─────────── */
49
+
50
+ h1 {
51
+ letter-spacing: -0.06em;
52
+ font-weight: 600;
53
+ line-height: 1.2;
54
+ }
55
+
56
+ h2 {
57
+ letter-spacing: -0.04em;
58
+ font-weight: 600;
59
+ line-height: 1.25;
60
+ }
61
+
62
+ h3 {
63
+ letter-spacing: -0.02em;
64
+ font-weight: 600;
65
+ line-height: 1.3;
66
+ }
67
+
68
+ /* Body / paragraph text — DarkBold uses 16px, 1.6 line-height */
69
+ .fd-docs-content p {
70
+ font-size: 1rem;
71
+ line-height: 1.6;
72
+ }
73
+
74
+ /* ═══════════════════════════════════════════════════════════════════
75
+ * SIDEBAR — DarkBold: borderless, no icons, plain text only
76
+ * ═══════════════════════════════════════════════════════════════════ */
77
+
78
+ /* Remove ALL sidebar borders */
79
+ aside,
80
+ #nd-sidebar,
81
+ aside#nd-sidebar,
82
+ #nd-docs-layout aside {
83
+ border: none;
84
+ border-right: none;
85
+ border-left: none;
86
+ border-color: transparent;
87
+ box-shadow: none;
88
+ background: var(--color-fd-background);
89
+ }
90
+
91
+ /* ── Hide sidebar link icons — DarkBold sidebar is text-only ──────── */
92
+ aside a > svg:first-child,
93
+ aside a > img:first-child {
94
+ display: none;
95
+ }
96
+
97
+ /* ── Hide TOC heading icon ──────────────────────────────────────── */
98
+ #nd-toc h3 > svg,
99
+ #nd-toc h3 > img {
100
+ display: none;
101
+ }
102
+
103
+ /* ── Sidebar links — match DarkBold: 14px, 400 weight, minimal pad ─ */
104
+ aside a[data-active] {
105
+ font-size: 0.875rem;
106
+ line-height: 1.5;
107
+ font-weight: 400;
108
+ padding: 6px 8px;
109
+ border-radius: 6px;
110
+ color: var(--color-fd-muted-foreground);
111
+ transition: color 150ms;
112
+ }
113
+
114
+ aside a[data-active]:hover {
115
+ color: var(--color-fd-foreground);
116
+ background: transparent;
117
+ }
118
+
119
+ /* Active sidebar item — DarkBold uses foreground color, 500 weight */
120
+ aside a[data-active="true"] {
121
+ color: var(--color-fd-foreground);
122
+ font-weight: 500;
123
+ background: transparent;
124
+ background-color: transparent;
125
+ }
126
+
127
+ aside a[data-active="true"]::before {
128
+ background-color: transparent;
129
+ width: 0;
130
+ }
131
+
132
+ /* Category/folder headings in sidebar */
133
+ aside button.text-fd-muted-foreground {
134
+ font-weight: 500;
135
+ text-transform: none;
136
+ letter-spacing: normal;
137
+ font-size: 0.875rem;
138
+ color: var(--color-fd-foreground);
139
+ }
140
+
141
+ /* Search button in sidebar */
142
+ aside button[class*="bg-fd-secondary"] {
143
+ background: var(--color-fd-accent);
144
+ border: 1px solid var(--color-fd-border);
145
+ border-radius: 6px;
146
+ font-size: 0.875rem;
147
+ }
148
+
149
+ /* Sidebar footer border removal */
150
+ aside .border-t,
151
+ aside [class*="border-t"] {
152
+ border-top-color: transparent;
153
+ }
154
+
155
+ /* ═══════════════════════════════════════════════════════════════════
156
+ * HEADER — DarkBold: no bottom border, transparent background
157
+ * ═══════════════════════════════════════════════════════════════════ */
158
+
159
+ header,
160
+ [role="banner"],
161
+ #nd-docs-layout > header,
162
+ nav[class*="header"] {
163
+ border-bottom: none;
164
+ border-color: transparent;
165
+ }
166
+
167
+ /* ═══════════════════════════════════════════════════════════════════
168
+ * CONTENT — links, code, tables, etc.
169
+ * ═══════════════════════════════════════════════════════════════════ */
170
+
171
+ /* Links in prose — DarkBold uses underline, dark text */
172
+ .fd-docs-content a:not(.fd-page-nav-card):not([class]) {
173
+ text-decoration: underline;
174
+ text-underline-offset: 3px;
175
+ text-decoration-color: var(--color-fd-border);
176
+ text-decoration-thickness: 1px;
177
+ font-weight: 500;
178
+ color: var(--color-fd-foreground);
179
+ transition: text-decoration-color 150ms;
180
+ }
181
+
182
+ .fd-docs-content a:not(.fd-page-nav-card):not([class]):hover {
183
+ text-decoration-color: var(--color-fd-foreground);
184
+ }
185
+
186
+ /* Inline code */
187
+ .fd-docs-content :not(pre) > code {
188
+ padding: 1px 4px;
189
+ border: 1px solid var(--color-fd-border);
190
+ font-size: 0.875rem;
191
+ border-radius: 4px;
192
+ background: var(--color-fd-muted);
193
+ color: var(--color-fd-foreground);
194
+ font-weight: 400;
195
+ }
196
+
197
+ /* Tables */
198
+ .fd-docs-content table {
199
+ border-collapse: separate;
200
+ border-spacing: 0;
201
+ background: var(--color-fd-card);
202
+ border-radius: 8px;
203
+ border: 1px solid var(--color-fd-border);
204
+ overflow: hidden;
205
+ width: 100%;
206
+ }
207
+
208
+ .fd-docs-content th {
209
+ background: var(--color-fd-muted);
210
+ font-weight: 500;
211
+ font-size: 0.8125rem;
212
+ color: var(--color-fd-muted-foreground);
213
+ text-transform: none;
214
+ letter-spacing: normal;
215
+ }
216
+
217
+ .fd-docs-content th,
218
+ .fd-docs-content td {
219
+ padding: 0.75rem 1rem;
220
+ border-bottom: 1px solid var(--color-fd-border);
221
+ font-size: 0.875rem;
222
+ }
223
+
224
+ .fd-docs-content tr:last-child td {
225
+ border-bottom: none;
226
+ }
227
+
228
+ /* Blockquotes */
229
+ .fd-docs-content blockquote {
230
+ border-left: 3px solid var(--color-fd-border);
231
+ padding-left: 1rem;
232
+ color: var(--color-fd-muted-foreground);
233
+ font-style: normal;
234
+ margin: 1rem 0;
235
+ }
236
+
237
+ /* Horizontal rule */
238
+ .fd-docs-content hr {
239
+ border-color: var(--color-fd-border);
240
+ }
241
+
242
+ /* ═══════════════════════════════════════════════════════════════════
243
+ * CARDS
244
+ * ═══════════════════════════════════════════════════════════════════ */
245
+
246
+ .fd-card {
247
+ display: block;
248
+ border-radius: 8px;
249
+ border: 1px solid var(--color-fd-border);
250
+ background: var(--color-fd-card);
251
+ padding: 1.25rem;
252
+ font-size: 0.875rem;
253
+ color: var(--color-fd-card-foreground);
254
+ box-shadow: none;
255
+ transition: background-color 150ms, border-color 150ms;
256
+ }
257
+
258
+ .fd-card:hover {
259
+ border-color: #999;
260
+ box-shadow: none;
261
+ }
262
+
263
+ .dark .fd-card:hover {
264
+ border-color: #555;
265
+ }
266
+
267
+ .fd-card-icon {
268
+ margin-bottom: 0.5rem;
269
+ width: fit-content;
270
+ border-radius: 6px;
271
+ border: 1px solid var(--color-fd-border);
272
+ padding: 0.5rem;
273
+ color: var(--color-fd-muted-foreground);
274
+ background: var(--color-fd-secondary);
275
+ }
276
+
277
+ .fd-card-title {
278
+ font-weight: 500;
279
+ font-size: 0.9375rem;
280
+ }
281
+
282
+ .fd-card-description {
283
+ color: var(--color-fd-muted-foreground);
284
+ margin-top: 0.25rem;
285
+ font-size: 0.8125rem;
286
+ line-height: 1.5;
287
+ }
288
+
289
+ .fd-cards {
290
+ display: grid;
291
+ grid-template-columns: 1fr;
292
+ gap: 0.75rem;
293
+ }
294
+
295
+ @media (min-width: 640px) {
296
+ .fd-cards {
297
+ grid-template-columns: repeat(2, 1fr);
298
+ }
299
+ }
300
+
301
+ .fd-page-nav-card {
302
+ border-radius: 8px;
303
+ }
304
+
305
+ /* ═══════════════════════════════════════════════════════════════════
306
+ * CODE BLOCKS
307
+ * ═══════════════════════════════════════════════════════════════════ */
308
+
309
+ figure.shiki {
310
+ border-radius: 8px;
311
+ overflow: hidden;
312
+ border: 1px solid var(--color-fd-border);
313
+ }
314
+
315
+ /* ═══════════════════════════════════════════════════════════════════
316
+ * TABS — DarkBold: bottom border indicator, no background
317
+ * ═══════════════════════════════════════════════════════════════════ */
318
+
319
+ [role="tablist"] {
320
+ border-bottom: 1px solid var(--color-fd-border);
321
+ }
322
+
323
+ [role="tab"] {
324
+ font-size: 0.875rem;
325
+ font-weight: 400;
326
+ padding: 0.5rem 0.75rem;
327
+ border-radius: 0;
328
+ color: var(--color-fd-muted-foreground);
329
+ border-bottom: 2px solid transparent;
330
+ transition: color 150ms, border-color 150ms;
331
+ }
332
+
333
+ [role="tab"][aria-selected="true"],
334
+ [role="tab"][data-state="active"] {
335
+ color: var(--color-fd-foreground);
336
+ border-bottom-color: var(--color-fd-foreground);
337
+ font-weight: 500;
338
+ }
339
+
340
+ /* ═══════════════════════════════════════════════════════════════════
341
+ * CALLOUT, ACCORDION
342
+ * ═══════════════════════════════════════════════════════════════════ */
343
+
344
+ [style*="--callout-color"] {
345
+ border-radius: 8px;
346
+ border-width: 1px;
347
+ }
348
+
349
+ details {
350
+ border: 1px solid var(--color-fd-border);
351
+ border-radius: 8px;
352
+ padding: 0;
353
+ margin: 0.75rem 0;
354
+ overflow: hidden;
355
+ }
356
+
357
+ details summary {
358
+ padding: 0.75rem 1rem;
359
+ font-weight: 500;
360
+ font-size: 0.9375rem;
361
+ cursor: pointer;
362
+ color: var(--color-fd-foreground);
363
+ background: var(--color-fd-secondary);
364
+ transition: background 150ms;
365
+ }
366
+
367
+ details summary:hover {
368
+ background: var(--color-fd-accent);
369
+ }
370
+
371
+ details[open] summary {
372
+ border-bottom: 1px solid var(--color-fd-border);
373
+ }
374
+
375
+ details > :not(summary) {
376
+ padding: 0.75rem 1rem;
377
+ }
378
+
379
+ /* ═══════════════════════════════════════════════════════════════════
380
+ * TOC — style varies by config: "default" or "directional"
381
+ *
382
+ * "default" → text color only, hide .toc-thumb
383
+ * "directional" → animated .toc-thumb bar (clerk style)
384
+ *
385
+ * We only override text colors here. The active indicator is
386
+ * handled by fumadocs-ui based on the style prop.
387
+ * ═══════════════════════════════════════════════════════════════════ */
388
+
389
+ #nd-toc a[data-active="true"] {
390
+ color: var(--color-fd-foreground);
391
+ font-weight: 500;
392
+ }
393
+
394
+ #nd-toc a[data-active="false"] {
395
+ color: var(--color-fd-muted-foreground);
396
+ }
397
+
398
+ #nd-toc a {
399
+ font-size: 0.875rem;
400
+ line-height: 1.3;
401
+ }
402
+
403
+ #nd-toc h3 {
404
+ font-size: 0.875rem;
405
+ font-weight: 500;
406
+ }
407
+
408
+ /* ═══════════════════════════════════════════════════════════════════
409
+ * COMMAND PALETTE
410
+ * ═══════════════════════════════════════════════════════════════════ */
411
+
412
+ .omni-content {
413
+ border-radius: 12px;
414
+ border: 1px solid var(--color-fd-border);
415
+ background: var(--color-fd-popover);
416
+ box-shadow: 0 16px 70px rgba(0, 0, 0, 0.12);
417
+ }
418
+
419
+ .omni-item {
420
+ border-radius: 6px;
421
+ }
422
+
423
+ .omni-item-active {
424
+ background: var(--color-fd-accent);
425
+ }
426
+
427
+ .omni-highlight {
428
+ background: rgba(0, 0, 0, 0.06);
429
+ color: var(--color-fd-foreground);
430
+ }
431
+
432
+ .dark .omni-highlight {
433
+ background: rgba(255, 255, 255, 0.1);
434
+ }
435
+
436
+ .omni-search-input:focus {
437
+ caret-color: var(--color-fd-foreground);
438
+ }
439
+
440
+ /* ═══════════════════════════════════════════════════════════════════
441
+ * PAGE FOOTER, ACTIONS, DESCRIPTION
442
+ * ═══════════════════════════════════════════════════════════════════ */
443
+
444
+ .fd-page-footer {
445
+ border-top: 1px solid var(--color-fd-border);
446
+ }
447
+
448
+ .fd-page-description {
449
+ margin-bottom: 1rem;
450
+ font-size: 1rem;
451
+ line-height: 1.6;
452
+ color: var(--color-fd-muted-foreground);
453
+ }
454
+
455
+ .fd-page-action-btn {
456
+ border-radius: 6px;
457
+ font-size: 0.8125rem;
458
+ }
459
+
460
+ .fd-page-action-menu {
461
+ border-radius: 8px;
462
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
463
+ }
464
+
465
+ .fd-page-action-menu-item {
466
+ border-radius: 4px;
467
+ }
468
+
469
+ /* ═══════════════════════════════════════════════════════════════════
470
+ * AI CHAT
471
+ * ═══════════════════════════════════════════════════════════════════ */
472
+
473
+ .fd-ai-dialog {
474
+ border-radius: 12px;
475
+ box-shadow: 0 16px 70px rgba(0, 0, 0, 0.12);
476
+ }
477
+
478
+ .fd-ai-bubble-user {
479
+ border-radius: 16px 16px 4px 16px;
480
+ }
481
+
482
+ .fd-ai-bubble-ai {
483
+ border-radius: 16px 16px 16px 4px;
484
+ }
485
+
486
+ .fd-ai-input-wrap {
487
+ border-radius: 8px;
488
+ }
489
+
490
+ .fd-ai-send-btn {
491
+ border-radius: 8px;
492
+ }
493
+
494
+ .dark .fd-ai-floating-btn {
495
+ border-radius: 999px;
496
+ background: #000;
497
+ color: #fff;
498
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
499
+ border: 1px solid rgba(255, 255, 255, 0.25);
500
+ }
501
+
502
+ .dark .fd-ai-floating-btn:hover {
503
+ background: #111;
504
+ }
505
+
506
+ :root:not(.dark) .fd-ai-floating-btn {
507
+ border-radius: 999px;
508
+ background: #000;
509
+ color: #fff;
510
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
511
+ border: 1px solid rgba(0, 0, 0, 0.15);
512
+ }
513
+
514
+ :root:not(.dark) .fd-ai-floating-btn:hover {
515
+ background: #111;
516
+ }
517
+
518
+ .fd-ai-suggestion {
519
+ border-radius: 8px;
520
+ }
521
+
522
+ .fd-ai-result {
523
+ border-radius: 8px;
524
+ }
525
+
526
+ .fd-ai-fm-input-container {
527
+ border-radius: 10px;
528
+ }
529
+
530
+ .fd-ai-fm-send-btn {
531
+ border-radius: 9999px;
532
+ }
533
+
534
+ .fd-ai-fm-suggestion {
535
+ border-radius: 9999px;
536
+ }
537
+
538
+ .fd-ai-fm-trigger-btn {
539
+ border-radius: 16px;
540
+ }
541
+
542
+ .fd-ai-fm-close-btn {
543
+ border-radius: 9999px;
544
+ }
545
+
546
+ .fd-ai-code-block {
547
+ border-radius: 8px;
548
+ }
549
+
550
+ .fd-ai-code-copy {
551
+ border-radius: 4px;
552
+ }
553
+
554
+ /* ═══════════════════════════════════════════════════════════════════
555
+ * SCROLLBAR — subtle
556
+ * ═══════════════════════════════════════════════════════════════════ */
557
+
558
+ .fd-sidebar::-webkit-scrollbar {
559
+ width: 4px;
560
+ }
561
+
562
+ .fd-sidebar::-webkit-scrollbar-thumb {
563
+ background: var(--color-fd-border);
564
+ border-radius: 4px;
565
+ }
566
+
567
+ .fd-sidebar::-webkit-scrollbar-track {
568
+ background: transparent;
569
+ }
@@ -308,6 +308,7 @@ article a[class*="text-fd-muted-foreground"] {
308
308
  .fd-page-action-menu {
309
309
  border-radius: 0.2rem !important;
310
310
  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
311
+ padding: 0px !important;
311
312
  }
312
313
 
313
314
  .fd-page-action-menu-item {