@farming-labs/astro-theme 0.0.3-beta.2 → 0.0.3-beta.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.
Files changed (12) hide show
  1. package/package.json +3 -3
  2. package/src/components/DocsContent.astro +262 -2
  3. package/src/components/DocsLayout.astro +35 -14
  4. package/src/components/DocsPage.astro +50 -23
  5. package/src/components/FloatingAIChat.astro +25 -3
  6. package/src/components/SearchDialog.astro +345 -265
  7. package/styles/colorful.css +49 -3
  8. package/styles/darksharp.css +18 -0
  9. package/styles/docs.css +229 -17
  10. package/styles/greentree.css +237 -27
  11. package/styles/omni.css +359 -0
  12. package/styles/pixel-border.css +108 -2
package/styles/pixel-border.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @farming-labs/svelte-theme — pixel-border theme
2
+ * @farming-labs/astro-theme — pixel-border theme
3
3
  * Inspired by better-auth.com — clean dark UI, sharp corners, visible borders.
4
4
  * Import AFTER docs.css to override the default neutral preset.
5
5
  */
@@ -23,6 +23,13 @@
23
23
  --color-fd-accent-foreground: oklch(0.216 0.006 56.043);
24
24
  --color-fd-border: oklch(0.923 0.003 48.717);
25
25
  --color-fd-ring: oklch(0.709 0.01 56.259);
26
+ --scrollbar-thumb: var(--color-fd-border);
27
+ --scrollbar-thumb-hover: var(--color-fd-ring);
28
+ --scrollbar-track: transparent;
29
+ --radius: 0px;
30
+ --fd-nav-height: 56px;
31
+ --fd-banner-height: 0px;
32
+ --fd-tocnav-height: 0px;
26
33
  }
27
34
 
28
35
  /* ─── Color Tokens (dark) ────────────────────────────────────────── */
@@ -44,6 +51,71 @@
44
51
  --color-fd-accent-foreground: oklch(0.985 0.001 106.423);
45
52
  --color-fd-border: hsl(0 0% 15%);
46
53
  --color-fd-ring: hsl(0 0% 30%);
54
+ --scrollbar-thumb: var(--color-fd-border);
55
+ --scrollbar-thumb-hover: var(--color-fd-ring);
56
+ --scrollbar-track: transparent;
57
+ }
58
+
59
+ /* ─── Scroll (light + dark) ──────────────────────────────────────── */
60
+
61
+ html {
62
+ scroll-behavior: auto;
63
+ scroll-padding-top: calc(
64
+ var(--fd-nav-height, 56px) + var(--fd-banner-height, 0px) + var(--fd-tocnav-height, 0px) + 24px
65
+ );
66
+ }
67
+
68
+ html:not([data-anchor-scrolling]) {
69
+ scroll-behavior: smooth;
70
+ }
71
+
72
+ /* ─── Custom scrollbar (light + dark) ─────────────────────────────── */
73
+
74
+ * {
75
+ scrollbar-width: thin;
76
+ scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
77
+ }
78
+
79
+ ::-webkit-scrollbar {
80
+ width: 12px;
81
+ height: 12px;
82
+ }
83
+
84
+ ::-webkit-scrollbar-track {
85
+ background: var(--scrollbar-track);
86
+ }
87
+
88
+ ::-webkit-scrollbar-thumb {
89
+ background-color: var(--scrollbar-thumb);
90
+ border-radius: 9999px;
91
+ border: 3px solid transparent;
92
+ background-clip: content-box;
93
+ }
94
+
95
+ ::-webkit-scrollbar-thumb:hover {
96
+ background-color: var(--scrollbar-thumb-hover);
97
+ }
98
+
99
+ ::-webkit-scrollbar-corner {
100
+ background: transparent;
101
+ }
102
+
103
+ /* ─── Selection (light + dark) ───────────────────────────────────── */
104
+
105
+ body {
106
+ overscroll-behavior: none;
107
+ }
108
+
109
+ ::selection {
110
+ background: var(--color-fd-foreground);
111
+ color: var(--color-fd-background);
112
+ }
113
+
114
+ /* ─── Inline code word break ────────────────────────────────────── */
115
+
116
+ code:not(pre code) {
117
+ overflow-wrap: break-word;
118
+ word-break: break-word;
47
119
  }
48
120
 
49
121
  /* ─── Sharp corners everywhere (both modes) ──────────────────────── */
@@ -310,7 +382,16 @@
310
382
  }
311
383
 
312
384
  .fd-codeblock-title {
313
- border-bottom-color: var(--color-fd-border);
385
+ border-bottom: 1px solid var(--color-fd-border) !important;
386
+ border-radius: 0 !important;
387
+ background-color: var(--color-fd-secondary, hsl(0 0% 8%)) !important;
388
+ background-image: repeating-linear-gradient(
389
+ -45deg,
390
+ color-mix(in srgb, var(--color-fd-foreground, #fff) 7%, transparent),
391
+ color-mix(in srgb, var(--color-fd-foreground, #fff) 7%, transparent) 1px,
392
+ transparent 1px,
393
+ transparent 6px
394
+ ) !important;
314
395
  }
315
396
 
316
397
  .fd-codeblock-title .fd-copy-btn {
@@ -455,6 +536,31 @@
455
536
  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
456
537
  }
457
538
 
539
+ .fd-ai-floating-trigger .ask-ai-trigger {
540
+ font-family: var(--fd-font-sans, inherit);
541
+ border-radius: 0 !important;
542
+ box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)) !important;
543
+ }
544
+
545
+ .fd-ai-floating-trigger .ask-ai-trigger:hover {
546
+ transform: translate(-1px, -1px);
547
+ box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
548
+ }
549
+
550
+ .fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger {
551
+ border-radius: 0 !important;
552
+ font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
553
+ text-transform: uppercase !important;
554
+ letter-spacing: 0.04em !important;
555
+ font-size: 12px !important;
556
+ box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)) !important;
557
+ }
558
+
559
+ .fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
560
+ transform: translate(-1px, -1px);
561
+ box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
562
+ }
563
+
458
564
  .fd-ai-suggestion {
459
565
  border-radius: 0 !important;
460
566
  font-size: 12px;