@farming-labs/svelte-theme 0.1.62 → 0.1.64

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farming-labs/svelte-theme",
3
- "version": "0.1.62",
3
+ "version": "0.1.64",
4
4
  "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
5
5
  "keywords": [
6
6
  "docs",
@@ -41,6 +41,9 @@
41
41
  ],
42
42
  "hardline": [
43
43
  "./src/themes/hardline.d.ts"
44
+ ],
45
+ "ledger": [
46
+ "./src/themes/ledger.d.ts"
44
47
  ]
45
48
  }
46
49
  },
@@ -87,6 +90,11 @@
87
90
  "import": "./src/themes/command-grid.js",
88
91
  "default": "./src/themes/command-grid.js"
89
92
  },
93
+ "./ledger": {
94
+ "types": "./src/themes/ledger.d.ts",
95
+ "import": "./src/themes/ledger.js",
96
+ "default": "./src/themes/ledger.js"
97
+ },
90
98
  "./css": "./styles/docs.css",
91
99
  "./fumadocs/css": "./styles/docs.css",
92
100
  "./styles/pixel-border.css": "./styles/pixel-border.css",
@@ -107,13 +115,15 @@
107
115
  "./styles/concrete.css": "./styles/concrete.css",
108
116
  "./concrete/css": "./styles/concrete-bundle.css",
109
117
  "./styles/command-grid.css": "./styles/command-grid.css",
110
- "./command-grid/css": "./styles/command-grid-bundle.css"
118
+ "./command-grid/css": "./styles/command-grid-bundle.css",
119
+ "./styles/ledger.css": "./styles/ledger.css",
120
+ "./ledger/css": "./styles/ledger-bundle.css"
111
121
  },
112
122
  "dependencies": {
113
123
  "gray-matter": "^4.0.3",
114
124
  "sugar-high": "^0.9.5",
115
- "@farming-labs/svelte": "0.1.62",
116
- "@farming-labs/docs": "0.1.62"
125
+ "@farming-labs/docs": "0.1.64",
126
+ "@farming-labs/svelte": "0.1.64"
117
127
  },
118
128
  "peerDependencies": {
119
129
  "svelte": ">=5.0.0"
package/src/index.d.ts CHANGED
@@ -27,3 +27,6 @@ export declare const ConcreteUIDefaults: Record<string, unknown>;
27
27
 
28
28
  export declare const hardline: (overrides?: { ui?: Record<string, unknown> }) => DocsTheme;
29
29
  export declare const HardlineUIDefaults: Record<string, unknown>;
30
+
31
+ export declare const ledger: (overrides?: { ui?: Record<string, unknown> }) => DocsTheme;
32
+ export declare const LedgerUIDefaults: Record<string, unknown>;
package/src/index.js CHANGED
@@ -23,3 +23,4 @@ export { pixelBorder, PixelBorderUIDefaults } from "./themes/pixel-border.js";
23
23
  export { darksharp, DarksharpUIDefaults } from "./themes/darksharp.js";
24
24
  export { concrete, ConcreteUIDefaults } from "./themes/concrete.js";
25
25
  export { hardline, HardlineUIDefaults } from "./themes/hardline.js";
26
+ export { ledger, LedgerUIDefaults } from "./themes/ledger.js";
@@ -0,0 +1,4 @@
1
+ export declare const ledger: (overrides?: {
2
+ ui?: Record<string, unknown>;
3
+ }) => import("@farming-labs/docs").DocsTheme;
4
+ export declare const LedgerUIDefaults: Record<string, unknown>;
@@ -0,0 +1,60 @@
1
+ import { createTheme } from "@farming-labs/docs";
2
+
3
+ const LedgerUIDefaults = {
4
+ colors: {
5
+ primary: "#5f6cf6",
6
+ primaryForeground: "#ffffff",
7
+ background: "#f6f8fb",
8
+ foreground: "#30364a",
9
+ muted: "#eef3fb",
10
+ mutedForeground: "#677187",
11
+ border: "#dbe3ef",
12
+ card: "#ffffff",
13
+ cardForeground: "#30364a",
14
+ accent: "#edf2ff",
15
+ accentForeground: "#30364a",
16
+ secondary: "#eef3fb",
17
+ secondaryForeground: "#30364a",
18
+ popover: "#ffffff",
19
+ popoverForeground: "#30364a",
20
+ ring: "#5f6cf6",
21
+ },
22
+ typography: {
23
+ font: {
24
+ style: {
25
+ sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
26
+ mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
27
+ },
28
+ h1: { size: "2.25rem", weight: 700, lineHeight: "1.18", letterSpacing: "0" },
29
+ h2: { size: "1.625rem", weight: 700, lineHeight: "1.28", letterSpacing: "0" },
30
+ h3: { size: "1.25rem", weight: 700, lineHeight: "1.35", letterSpacing: "0" },
31
+ h4: { size: "1.0625rem", weight: 700, lineHeight: "1.4", letterSpacing: "0" },
32
+ body: { size: "0.9375rem", weight: 400, lineHeight: "1.7" },
33
+ small: { size: "0.8125rem", weight: 400, lineHeight: "1.5" },
34
+ },
35
+ },
36
+ radius: "0.5rem",
37
+ layout: {
38
+ contentWidth: 820,
39
+ sidebarWidth: 292,
40
+ tocWidth: 236,
41
+ toc: { enabled: true, depth: 3, style: "default" },
42
+ header: { height: 64, sticky: true },
43
+ },
44
+ sidebar: {
45
+ style: "bordered",
46
+ },
47
+ components: {
48
+ Callout: { variant: "soft", icon: true },
49
+ CodeBlock: { showCopyButton: true },
50
+ HoverLink: { linkLabel: "Open page", showIndicator: false },
51
+ Tabs: { style: "default" },
52
+ },
53
+ };
54
+
55
+ export const ledger = createTheme({
56
+ name: "ledger",
57
+ ui: LedgerUIDefaults,
58
+ });
59
+
60
+ export { LedgerUIDefaults };
@@ -0,0 +1,3 @@
1
+ /* @farming-labs/svelte-theme - ledger theme bundled */
2
+ @import "./docs.css";
3
+ @import "./ledger.css";
@@ -0,0 +1,395 @@
1
+ /* @farming-labs/svelte-theme - ledger theme overrides */
2
+ :root {
3
+ --color-fd-primary: #5f6cf6;
4
+ --color-fd-primary-foreground: #ffffff;
5
+ --color-fd-ring: #5f6cf6;
6
+ --color-fd-background: #f6f8fb;
7
+ --color-fd-foreground: #30364a;
8
+ --color-fd-card: #ffffff;
9
+ --color-fd-card-foreground: #30364a;
10
+ --color-fd-popover: #ffffff;
11
+ --color-fd-popover-foreground: #30364a;
12
+ --color-fd-secondary: #eef3fb;
13
+ --color-fd-secondary-foreground: #30364a;
14
+ --color-fd-muted: #eef3fb;
15
+ --color-fd-muted-foreground: #677187;
16
+ --color-fd-accent: #edf2ff;
17
+ --color-fd-accent-foreground: #30364a;
18
+ --color-fd-border: #dbe3ef;
19
+ --radius: 0.5rem;
20
+ --fd-nav-height: 64px;
21
+ --fd-ledger-soft-border: rgba(67, 80, 111, 0.16);
22
+ --fd-ledger-shadow: 0 1px 2px rgba(48, 54, 74, 0.08), 0 10px 32px rgba(48, 54, 74, 0.08);
23
+ --fd-ledger-code-bg: #f8fbff;
24
+ --fd-ledger-code-fg: #26314a;
25
+ --fd-ledger-code-title: #40506b;
26
+ --fd-ledger-code-border: #d7e2f1;
27
+ --fd-ledger-code-shadow: none;
28
+ --fd-ledger-action-bg: #ffffff;
29
+ --fd-ledger-action-hover: #f1f4ff;
30
+ --fd-ledger-action-color: #3f485f;
31
+ --fd-ledger-action-icon: #5f6cf6;
32
+ }
33
+
34
+ .dark {
35
+ --color-fd-primary: #9aa8ff;
36
+ --color-fd-primary-foreground: #10131a;
37
+ --color-fd-ring: #9aa8ff;
38
+ --color-fd-background: #10131a;
39
+ --color-fd-foreground: #edf2f8;
40
+ --color-fd-card: #171c26;
41
+ --color-fd-card-foreground: #edf2f8;
42
+ --color-fd-popover: #171c26;
43
+ --color-fd-popover-foreground: #edf2f8;
44
+ --color-fd-secondary: #202736;
45
+ --color-fd-secondary-foreground: #edf2f8;
46
+ --color-fd-muted: #202736;
47
+ --color-fd-muted-foreground: #aab5c7;
48
+ --color-fd-accent: #252d3f;
49
+ --color-fd-accent-foreground: #edf2f8;
50
+ --color-fd-border: #30384a;
51
+ --fd-ledger-soft-border: rgba(174, 186, 205, 0.16);
52
+ --fd-ledger-shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 18px 42px rgba(0, 0, 0, 0.28);
53
+ --fd-ledger-code-bg: #0d1220;
54
+ --fd-ledger-code-fg: #f7f9ff;
55
+ --fd-ledger-code-title: #dbe5ff;
56
+ --fd-ledger-code-border: #30394d;
57
+ --fd-ledger-code-shadow: none;
58
+ --fd-ledger-action-bg: #171c26;
59
+ --fd-ledger-action-hover: #20283a;
60
+ --fd-ledger-action-color: #e7edf7;
61
+ --fd-ledger-action-icon: #a8b5ff;
62
+ }
63
+
64
+ body,
65
+ .fd-layout {
66
+ background: var(--color-fd-background);
67
+ color: var(--color-fd-foreground);
68
+ }
69
+
70
+ .fd-header {
71
+ min-height: var(--fd-nav-height);
72
+ border-bottom: 1px solid var(--fd-ledger-soft-border);
73
+ background: color-mix(in srgb, var(--color-fd-background) 88%, transparent);
74
+ backdrop-filter: blur(14px);
75
+ }
76
+
77
+ .fd-nav a,
78
+ .fd-header a {
79
+ border-radius: 999px;
80
+ color: var(--color-fd-muted-foreground);
81
+ font-size: 0.875rem;
82
+ font-weight: 500;
83
+ letter-spacing: 0;
84
+ padding: 0.375rem 0.625rem;
85
+ }
86
+
87
+ .fd-nav a:hover,
88
+ .fd-nav a[data-active="true"],
89
+ .fd-nav a[aria-current="page"] {
90
+ background: color-mix(in srgb, var(--color-fd-primary) 12%, transparent);
91
+ color: var(--color-fd-primary);
92
+ }
93
+
94
+ .fd-sidebar {
95
+ background: color-mix(in srgb, var(--color-fd-background) 90%, var(--color-fd-card));
96
+ border-right: 1px solid var(--fd-ledger-soft-border);
97
+ }
98
+
99
+ .fd-sidebar a,
100
+ .fd-sidebar button {
101
+ border-radius: 0.5rem;
102
+ color: var(--color-fd-muted-foreground);
103
+ font-size: 0.875rem;
104
+ font-weight: 500;
105
+ letter-spacing: 0;
106
+ }
107
+
108
+ .fd-sidebar a:hover,
109
+ .fd-sidebar button:hover {
110
+ background: color-mix(in srgb, var(--color-fd-primary) 9%, transparent);
111
+ color: var(--color-fd-foreground);
112
+ }
113
+
114
+ .fd-sidebar a[data-active="true"],
115
+ .fd-sidebar a[aria-current="page"] {
116
+ background: color-mix(in srgb, var(--color-fd-primary) 13%, transparent);
117
+ color: var(--color-fd-primary);
118
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-fd-primary) 18%, transparent);
119
+ }
120
+
121
+ .fd-sidebar-search-btn,
122
+ .fd-search-trigger-mobile {
123
+ border: 1px solid var(--fd-ledger-soft-border);
124
+ border-radius: 0.5rem;
125
+ background: color-mix(in srgb, var(--color-fd-card) 88%, transparent);
126
+ color: var(--color-fd-muted-foreground);
127
+ box-shadow: 0 1px 2px rgba(48, 54, 74, 0.05);
128
+ }
129
+
130
+ .fd-toc {
131
+ border-left: 0;
132
+ box-shadow: none;
133
+ }
134
+
135
+ .fd-toc .border-s,
136
+ .fd-toc [class*="border-s"] {
137
+ border-inline-start-width: 0;
138
+ border-left: 0;
139
+ }
140
+
141
+ .fd-toc-title {
142
+ color: var(--color-fd-muted-foreground);
143
+ font-size: 0.75rem;
144
+ font-weight: 700;
145
+ letter-spacing: 0;
146
+ }
147
+
148
+ .fd-toc-link {
149
+ border-left: 0;
150
+ border-radius: 0.375rem;
151
+ color: var(--color-fd-muted-foreground);
152
+ font-size: 0.8125rem;
153
+ padding-left: 0.625rem;
154
+ }
155
+
156
+ .fd-toc-link:hover,
157
+ .fd-toc-link-active,
158
+ .fd-toc-link[data-active="true"] {
159
+ background: transparent;
160
+ color: var(--color-fd-primary);
161
+ }
162
+
163
+ .fd-docs-content h1,
164
+ .fd-page-title {
165
+ color: var(--color-fd-foreground);
166
+ font-size: 2.25rem;
167
+ font-weight: 700;
168
+ letter-spacing: 0;
169
+ line-height: 1.18;
170
+ }
171
+
172
+ .fd-docs-content h2 {
173
+ color: var(--color-fd-foreground);
174
+ font-size: 1.625rem;
175
+ font-weight: 700;
176
+ letter-spacing: 0;
177
+ line-height: 1.28;
178
+ }
179
+
180
+ .fd-docs-content h3 {
181
+ color: var(--color-fd-foreground);
182
+ font-size: 1.25rem;
183
+ font-weight: 700;
184
+ letter-spacing: 0;
185
+ }
186
+
187
+ .fd-docs-content :is(h1, h2, h3, h4) > a.peer {
188
+ border: 0;
189
+ border-radius: 0;
190
+ background: transparent;
191
+ box-shadow: none;
192
+ color: inherit;
193
+ padding: 0;
194
+ text-decoration: none;
195
+ }
196
+
197
+ .fd-page-description,
198
+ .fd-docs-content p,
199
+ .fd-docs-content li,
200
+ .fd-docs-content td {
201
+ color: var(--color-fd-muted-foreground);
202
+ line-height: 1.7;
203
+ }
204
+
205
+ .fd-docs-content a {
206
+ color: var(--color-fd-primary);
207
+ text-underline-offset: 3px;
208
+ }
209
+
210
+ .fd-card,
211
+ [data-card],
212
+ .fd-hover-link-card,
213
+ .fd-page-nav-card,
214
+ .fd-callout,
215
+ .fd-page-action-menu,
216
+ .fd-ai-dialog,
217
+ .omni-content,
218
+ .fd-feedback-input,
219
+ .fd-feedback-choice,
220
+ .fd-feedback-submit {
221
+ border: 1px solid var(--fd-ledger-soft-border);
222
+ border-radius: 0.5rem;
223
+ background: color-mix(in srgb, var(--color-fd-card) 96%, transparent);
224
+ box-shadow: 0 1px 2px rgba(48, 54, 74, 0.05);
225
+ }
226
+
227
+ .fd-card:hover,
228
+ [data-card]:hover,
229
+ .fd-hover-link-card:hover,
230
+ .fd-page-nav-card:hover {
231
+ border-color: color-mix(in srgb, var(--color-fd-primary) 28%, var(--color-fd-border));
232
+ box-shadow: var(--fd-ledger-shadow);
233
+ }
234
+
235
+ .fd-page-action-btn,
236
+ .fd-feedback-submit,
237
+ .fd-ai-send-btn,
238
+ .fd-ai-floating-btn {
239
+ border-radius: 0.5rem;
240
+ }
241
+
242
+ .fd-page-action-btn {
243
+ background: var(--fd-ledger-action-bg);
244
+ color: var(--fd-ledger-action-color);
245
+ border: 1px solid var(--fd-ledger-soft-border);
246
+ box-shadow: 0 1px 2px rgba(48, 54, 74, 0.06);
247
+ }
248
+
249
+ .fd-page-action-btn svg {
250
+ color: var(--fd-ledger-action-icon);
251
+ stroke: currentColor;
252
+ }
253
+
254
+ .fd-page-action-btn:hover {
255
+ background: var(--fd-ledger-action-hover);
256
+ border-color: color-mix(in srgb, var(--color-fd-primary) 34%, var(--color-fd-border));
257
+ color: var(--color-fd-foreground);
258
+ }
259
+
260
+ .fd-feedback-submit,
261
+ .fd-ai-send-btn,
262
+ .fd-ai-floating-btn {
263
+ background: var(--color-fd-primary);
264
+ color: var(--color-fd-primary-foreground);
265
+ }
266
+
267
+ .fd-tabs,
268
+ .fd-tabs-list,
269
+ [role="tablist"] {
270
+ border: 1px solid var(--fd-ledger-soft-border);
271
+ border-radius: 0.5rem;
272
+ background: var(--color-fd-secondary);
273
+ padding: 0.25rem;
274
+ }
275
+
276
+ .fd-tabs-trigger,
277
+ .fd-tab-trigger,
278
+ [role="tab"] {
279
+ border-radius: 0.375rem;
280
+ color: var(--color-fd-muted-foreground);
281
+ font-weight: 600;
282
+ }
283
+
284
+ .fd-tabs-trigger[data-state="active"],
285
+ .fd-tab-trigger[data-state="active"],
286
+ [role="tab"][aria-selected="true"] {
287
+ background: var(--color-fd-card);
288
+ color: var(--color-fd-primary);
289
+ box-shadow: 0 1px 2px rgba(48, 54, 74, 0.08);
290
+ }
291
+
292
+ .fd-codeblock,
293
+ .fd-codeblock pre,
294
+ .fd-docs-content pre,
295
+ .fd-docs-content .shiki,
296
+ .fd-ai-code-block {
297
+ border-radius: 0.5rem;
298
+ background: var(--fd-ledger-code-bg);
299
+ color: var(--fd-ledger-code-fg);
300
+ }
301
+
302
+ figure.shiki,
303
+ .fd-docs-content .shiki {
304
+ background: var(--fd-ledger-code-bg);
305
+ color: var(--shiki-light, var(--fd-ledger-code-fg));
306
+ }
307
+
308
+ figure.shiki :is(pre, code, span),
309
+ .fd-docs-content .shiki :is(pre, code, span) {
310
+ color: var(--shiki-light, var(--fd-ledger-code-fg));
311
+ }
312
+
313
+ .dark figure.shiki,
314
+ .dark .fd-docs-content .shiki {
315
+ background: var(--fd-ledger-code-bg);
316
+ color: var(--shiki-dark, var(--fd-ledger-code-fg));
317
+ }
318
+
319
+ .dark figure.shiki :is(pre, code, span),
320
+ .dark .fd-docs-content .shiki :is(pre, code, span) {
321
+ color: var(--shiki-dark, var(--fd-ledger-code-fg));
322
+ }
323
+
324
+ .fd-codeblock,
325
+ .fd-docs-content .shiki,
326
+ .fd-ai-code-block {
327
+ border: 1px solid var(--fd-ledger-code-border);
328
+ box-shadow: var(--fd-ledger-code-shadow);
329
+ overflow: hidden;
330
+ }
331
+
332
+ .fd-codeblock-title,
333
+ .fd-codeblock-title-text,
334
+ figure.shiki figcaption,
335
+ .fd-ai-code-header {
336
+ color: var(--fd-ledger-code-title);
337
+ }
338
+
339
+ .fd-codeblock-title,
340
+ figure.shiki:has(figcaption) > div:first-child,
341
+ figure.shiki figcaption,
342
+ .fd-ai-code-header {
343
+ display: flex;
344
+ min-height: 2.5rem;
345
+ align-items: center;
346
+ gap: 0;
347
+ border-bottom: 1px solid var(--fd-ledger-code-border);
348
+ background: var(--fd-ledger-code-bg);
349
+ font-size: 0.8125rem;
350
+ font-weight: 650;
351
+ letter-spacing: 0;
352
+ line-height: 1.4;
353
+ padding: 0 0.875rem;
354
+ }
355
+
356
+ .fd-codeblock-title-text,
357
+ figure.shiki figcaption,
358
+ .fd-ai-code-header span {
359
+ font-weight: 700;
360
+ }
361
+
362
+ .fd-codeblock-title .fd-copy-btn,
363
+ figure.shiki:has(figcaption) > div:first-child > button,
364
+ figure.shiki:has(figcaption) > div:first-child > div:last-child {
365
+ margin-left: auto;
366
+ }
367
+
368
+ .fd-copy-btn,
369
+ .fd-ai-code-copy {
370
+ border: 1px solid color-mix(in srgb, var(--fd-ledger-code-fg) 12%, transparent);
371
+ border-radius: 0.5rem;
372
+ background: color-mix(in srgb, var(--fd-ledger-code-fg) 8%, transparent);
373
+ color: var(--fd-ledger-code-fg);
374
+ }
375
+
376
+ .fd-docs-content :not(pre) > code {
377
+ border: 1px solid color-mix(in srgb, var(--color-fd-primary) 16%, transparent);
378
+ border-radius: 0.375rem;
379
+ background: color-mix(in srgb, var(--color-fd-primary) 9%, transparent);
380
+ color: var(--color-fd-foreground);
381
+ }
382
+
383
+ .fd-table-wrapper,
384
+ .fd-docs-content table {
385
+ border: 1px solid var(--fd-ledger-soft-border);
386
+ border-radius: 0.5rem;
387
+ background: var(--color-fd-card);
388
+ overflow: hidden;
389
+ }
390
+
391
+ .fd-table-wrapper th {
392
+ background: var(--color-fd-secondary);
393
+ color: var(--color-fd-foreground);
394
+ font-weight: 700;
395
+ }