@farming-labs/theme 0.0.68 → 0.0.72

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 (6) hide show
  1. package/dist/concrete/index.d.mts +90 -0
  2. package/dist/concrete/index.mjs +92 -0
  3. package/dist/index.d.mts +2 -1
  4. package/dist/index.mjs +2 -1
  5. package/package.json +8 -2
  6. package/styles/concrete.css +363 -0
package/dist/concrete/index.d.mts ADDED
@@ -0,0 +1,90 @@
1
+ import * as _farming_labs_docs0 from "@farming-labs/docs";
2
+
3
+ //#region src/concrete/index.d.ts
4
+ declare const ConcreteUIDefaults: {
5
+ colors: {
6
+ primary: string;
7
+ background: string;
8
+ muted: string;
9
+ border: string;
10
+ };
11
+ typography: {
12
+ font: {
13
+ style: {
14
+ sans: string;
15
+ mono: string;
16
+ };
17
+ h1: {
18
+ size: string;
19
+ weight: number;
20
+ lineHeight: string;
21
+ letterSpacing: string;
22
+ };
23
+ h2: {
24
+ size: string;
25
+ weight: number;
26
+ lineHeight: string;
27
+ letterSpacing: string;
28
+ };
29
+ h3: {
30
+ size: string;
31
+ weight: number;
32
+ lineHeight: string;
33
+ letterSpacing: string;
34
+ };
35
+ h4: {
36
+ size: string;
37
+ weight: number;
38
+ lineHeight: string;
39
+ letterSpacing: string;
40
+ };
41
+ body: {
42
+ size: string;
43
+ weight: number;
44
+ lineHeight: string;
45
+ };
46
+ small: {
47
+ size: string;
48
+ weight: number;
49
+ lineHeight: string;
50
+ letterSpacing: string;
51
+ };
52
+ };
53
+ };
54
+ radius: string;
55
+ layout: {
56
+ contentWidth: number;
57
+ sidebarWidth: number;
58
+ toc: {
59
+ enabled: boolean;
60
+ depth: number;
61
+ style: "directional";
62
+ };
63
+ header: {
64
+ height: number;
65
+ sticky: boolean;
66
+ };
67
+ };
68
+ sidebar: {
69
+ style: "bordered";
70
+ };
71
+ components: {
72
+ Callout: {
73
+ variant: string;
74
+ icon: boolean;
75
+ };
76
+ CodeBlock: {
77
+ showCopyButton: boolean;
78
+ };
79
+ HoverLink: {
80
+ linkLabel: string;
81
+ showIndicator: boolean;
82
+ };
83
+ Tabs: {
84
+ style: "default";
85
+ };
86
+ };
87
+ };
88
+ declare const concrete: (overrides?: Partial<_farming_labs_docs0.DocsTheme>) => _farming_labs_docs0.DocsTheme;
89
+ //#endregion
90
+ export { ConcreteUIDefaults, concrete };
package/dist/concrete/index.mjs ADDED
@@ -0,0 +1,92 @@
1
+ import { createTheme } from "@farming-labs/docs";
2
+
3
+ //#region src/concrete/index.ts
4
+ /**
5
+ * Concrete theme preset.
6
+ * Brutalist-inspired layout with poster typography, square corners, and offset shadows.
7
+ *
8
+ * CSS: `@import "@farming-labs/theme/concrete/css";`
9
+ */
10
+ const ConcreteUIDefaults = {
11
+ colors: {
12
+ primary: "#ff5b31",
13
+ background: "#f6ead9",
14
+ muted: "#5a4c42",
15
+ border: "#141210"
16
+ },
17
+ typography: { font: {
18
+ style: {
19
+ sans: "'Archivo', 'IBM Plex Sans', 'Space Grotesk', system-ui, sans-serif",
20
+ mono: "'Space Mono', 'IBM Plex Mono', ui-monospace, monospace"
21
+ },
22
+ h1: {
23
+ size: "2.85rem",
24
+ weight: 900,
25
+ lineHeight: "0.98",
26
+ letterSpacing: "-0.05em"
27
+ },
28
+ h2: {
29
+ size: "2.05rem",
30
+ weight: 850,
31
+ lineHeight: "1.04",
32
+ letterSpacing: "-0.035em"
33
+ },
34
+ h3: {
35
+ size: "1.52rem",
36
+ weight: 800,
37
+ lineHeight: "1.14",
38
+ letterSpacing: "-0.02em"
39
+ },
40
+ h4: {
41
+ size: "1.16rem",
42
+ weight: 750,
43
+ lineHeight: "1.28",
44
+ letterSpacing: "-0.01em"
45
+ },
46
+ body: {
47
+ size: "1.02rem",
48
+ weight: 550,
49
+ lineHeight: "1.68"
50
+ },
51
+ small: {
52
+ size: "0.83rem",
53
+ weight: 600,
54
+ lineHeight: "1.42",
55
+ letterSpacing: "0.02em"
56
+ }
57
+ } },
58
+ radius: "0px",
59
+ layout: {
60
+ contentWidth: 896,
61
+ sidebarWidth: 316,
62
+ toc: {
63
+ enabled: true,
64
+ depth: 3,
65
+ style: "directional"
66
+ },
67
+ header: {
68
+ height: 68,
69
+ sticky: true
70
+ }
71
+ },
72
+ sidebar: { style: "bordered" },
73
+ components: {
74
+ Callout: {
75
+ variant: "outline",
76
+ icon: true
77
+ },
78
+ CodeBlock: { showCopyButton: true },
79
+ HoverLink: {
80
+ linkLabel: "View doc",
81
+ showIndicator: false
82
+ },
83
+ Tabs: { style: "default" }
84
+ }
85
+ };
86
+ const concrete = createTheme({
87
+ name: "concrete",
88
+ ui: ConcreteUIDefaults
89
+ });
90
+
91
+ //#endregion
92
+ export { ConcreteUIDefaults, concrete };
package/dist/index.d.mts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ConcreteUIDefaults, concrete } from "./concrete/index.mjs";
1
2
  import { DefaultUIDefaults, fumadocs } from "./default/index.mjs";
2
3
  import { DocsCommandSearch } from "./docs-command-search.mjs";
3
4
  import { createDocsLayout, createDocsMetadata, createPageMetadata } from "./docs-layout.mjs";
@@ -14,4 +15,4 @@ import { AIConfig, BreadcrumbConfig, CopyMarkdownConfig, DocsConfig, DocsFeedbac
14
15
  import { DocsBody, DocsPage } from "fumadocs-ui/layouts/docs/page";
15
16
  import { Tab, Tabs } from "fumadocs-ui/components/tabs";
16
17
  import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre } from "fumadocs-ui/components/codeblock";
17
- export { type AIConfig, type BreadcrumbConfig, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, type CopyMarkdownConfig, DocsBody, DocsClientHooks, DocsCommandSearch, type DocsConfig, DocsFeedback, type DocsFeedbackData, type DocsFeedbackProps, type DocsFeedbackValue, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FeedbackConfig, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, type HoverLinkProps, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, withLangInUrl };
18
+ export { type AIConfig, type BreadcrumbConfig, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, ConcreteUIDefaults, type CopyMarkdownConfig, DocsBody, DocsClientHooks, DocsCommandSearch, type DocsConfig, DocsFeedback, type DocsFeedbackData, type DocsFeedbackProps, type DocsFeedbackValue, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FeedbackConfig, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, type HoverLinkProps, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, concrete, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, withLangInUrl };
package/dist/index.mjs CHANGED
@@ -6,6 +6,7 @@ import { DocsCommandSearch } from "./docs-command-search.mjs";
6
6
  import { createDocsLayout, createDocsMetadata, createPageMetadata } from "./docs-layout.mjs";
7
7
  import { RootProvider } from "./provider.mjs";
8
8
  import { DefaultUIDefaults, fumadocs } from "./default/index.mjs";
9
+ import { ConcreteUIDefaults, concrete } from "./concrete/index.mjs";
9
10
  import { HardlineUIDefaults, hardline } from "./hardline/index.mjs";
10
11
  import { DocsClientHooks } from "./docs-client-hooks.mjs";
11
12
  import { HoverLink } from "./hover-link.mjs";
@@ -15,4 +16,4 @@ import { DocsBody, DocsPage } from "fumadocs-ui/layouts/docs/page";
15
16
  import { Tab, Tabs } from "fumadocs-ui/components/tabs";
16
17
  import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre } from "fumadocs-ui/components/codeblock";
17
18
 
18
- export { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, DocsBody, DocsClientHooks, DocsCommandSearch, DocsFeedback, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, PageActions, Pre, RootProvider, Tab, Tabs, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, withLangInUrl };
19
+ export { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, ConcreteUIDefaults, DocsBody, DocsClientHooks, DocsCommandSearch, DocsFeedback, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, PageActions, Pre, RootProvider, Tab, Tabs, concrete, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, withLangInUrl };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farming-labs/theme",
3
- "version": "0.0.68",
3
+ "version": "0.0.72",
4
4
  "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
5
5
  "keywords": [
6
6
  "docs",
@@ -73,6 +73,11 @@
73
73
  "import": "./dist/hardline/index.mjs",
74
74
  "default": "./dist/hardline/index.mjs"
75
75
  },
76
+ "./concrete": {
77
+ "types": "./dist/concrete/index.d.mts",
78
+ "import": "./dist/concrete/index.mjs",
79
+ "default": "./dist/concrete/index.mjs"
80
+ },
76
81
  "./search": {
77
82
  "types": "./dist/search.d.mts",
78
83
  "import": "./dist/search.mjs",
@@ -103,6 +108,7 @@
103
108
  "./darkbold/css": "./styles/darkbold.css",
104
109
  "./greentree/css": "./styles/greentree.css",
105
110
  "./hardline/css": "./styles/hardline.css",
111
+ "./concrete/css": "./styles/concrete.css",
106
112
  "./presets/neutral": "./styles/presets/neutral.css",
107
113
  "./presets/black": "./styles/presets/black.css",
108
114
  "./presets/base": "./styles/presets/base.css"
@@ -121,7 +127,7 @@
121
127
  "tsdown": "^0.20.3",
122
128
  "typescript": "^5.9.3",
123
129
  "vitest": "^3.2.4",
124
- "@farming-labs/docs": "0.0.68"
130
+ "@farming-labs/docs": "0.0.72"
125
131
  },
126
132
  "peerDependencies": {
127
133
  "@farming-labs/docs": ">=0.0.1",
package/styles/concrete.css ADDED
@@ -0,0 +1,363 @@
1
+ /* @farming-labs/theme - concrete theme CSS */
2
+ @import "./hardline.css";
3
+
4
+ :root {
5
+ --color-fd-primary: #ff5b31;
6
+ --color-fd-primary-foreground: #140f0c;
7
+ --color-fd-ring: #141210;
8
+
9
+ --color-fd-background: #f6ead9;
10
+ --color-fd-foreground: #15120f;
11
+ --color-fd-card: #fbf4ea;
12
+ --color-fd-card-foreground: #15120f;
13
+ --color-fd-popover: #fbf4ea;
14
+ --color-fd-popover-foreground: #15120f;
15
+ --color-fd-secondary: #eadcc9;
16
+ --color-fd-secondary-foreground: #15120f;
17
+ --color-fd-muted: #e2d0b9;
18
+ --color-fd-muted-foreground: #5b4e42;
19
+ --color-fd-accent: #245dff;
20
+ --color-fd-accent-foreground: #f8f5ef;
21
+ --color-fd-border: #141210;
22
+
23
+ --radius: 0px;
24
+ --fd-nav-height: 68px;
25
+ }
26
+
27
+ .dark {
28
+ --color-fd-primary: #ff744d;
29
+ --color-fd-primary-foreground: #180f0b;
30
+ --color-fd-ring: #ff744d;
31
+
32
+ --color-fd-background: #12100f;
33
+ --color-fd-foreground: #f6eee2;
34
+ --color-fd-card: #1a1614;
35
+ --color-fd-card-foreground: #f6eee2;
36
+ --color-fd-popover: #1a1614;
37
+ --color-fd-popover-foreground: #f6eee2;
38
+ --color-fd-secondary: #211b18;
39
+ --color-fd-secondary-foreground: #f6eee2;
40
+ --color-fd-muted: #2d2520;
41
+ --color-fd-muted-foreground: #c8b6a5;
42
+ --color-fd-accent: #7ba2ff;
43
+ --color-fd-accent-foreground: #101216;
44
+ --color-fd-border: rgba(246, 238, 226, 0.88);
45
+ }
46
+
47
+ #nd-docs-layout > header,
48
+ [role="banner"] {
49
+ background:
50
+ linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 10%, var(--color-fd-background)), var(--color-fd-background));
51
+ }
52
+
53
+ aside a[data-active] {
54
+ text-transform: uppercase;
55
+ letter-spacing: 0.045em;
56
+ font-size: 0.79rem;
57
+ }
58
+
59
+ aside a[data-active="true"],
60
+ .fd-page-action-btn:hover,
61
+ .fd-page-action-btn[data-selected="true"],
62
+ .fd-page-action-btn[data-copied="true"],
63
+ .fd-feedback-choice:hover,
64
+ .fd-feedback-choice[data-selected="true"],
65
+ .fd-ai-tab[data-active="true"] {
66
+ box-shadow: 5px 5px 0 var(--color-fd-border);
67
+ transform: translate(-2px, -2px);
68
+ }
69
+
70
+ .dark aside a[data-active="true"],
71
+ .dark .fd-page-action-btn:hover,
72
+ .dark .fd-page-action-btn[data-selected="true"],
73
+ .dark .fd-page-action-btn[data-copied="true"],
74
+ .dark .fd-feedback-choice:hover,
75
+ .dark .fd-feedback-choice[data-selected="true"],
76
+ .dark .fd-ai-tab[data-active="true"] {
77
+ box-shadow: 5px 5px 0 color-mix(in srgb, var(--color-fd-primary) 55%, transparent);
78
+ }
79
+
80
+ .omni-item-active {
81
+ background: color-mix(in srgb, var(--color-fd-primary) 20%, var(--color-fd-card)) !important;
82
+ color: var(--color-fd-foreground) !important;
83
+ }
84
+
85
+ .omni-item-active .omni-item-icon,
86
+ .omni-item-active .omni-item-badge,
87
+ .omni-item-active .omni-item-ext,
88
+ .omni-item-active .omni-item-chevron {
89
+ color: var(--color-fd-foreground) !important;
90
+ }
91
+
92
+ .omni-item-active .omni-item-subtitle,
93
+ .omni-item-active .omni-item-shortcuts {
94
+ color: color-mix(in srgb, var(--color-fd-foreground) 78%, var(--color-fd-muted-foreground)) !important;
95
+ opacity: 1;
96
+ }
97
+
98
+ .dark .omni-item-active {
99
+ background: color-mix(in srgb, var(--color-fd-primary) 26%, var(--color-fd-card)) !important;
100
+ }
101
+
102
+ .fd-card,
103
+ [data-card],
104
+ [class*="fd-callout"],
105
+ .fd-page-action-menu,
106
+ .fd-page-action-btn,
107
+ .fd-docs-content pre,
108
+ .fd-docs-content .shiki,
109
+ .fd-docs-content [data-codeblock],
110
+ .fd-page-nav,
111
+ .fd-page-nav-card,
112
+ [class*="page-nav"] a {
113
+ box-shadow: 6px 6px 0 var(--color-fd-border);
114
+ }
115
+
116
+ .dark .fd-card,
117
+ .dark [data-card],
118
+ .dark [class*="fd-callout"],
119
+ .dark .fd-page-action-menu,
120
+ .dark .fd-page-action-btn,
121
+ .dark .fd-docs-content pre,
122
+ .dark .fd-docs-content .shiki,
123
+ .dark .fd-docs-content [data-codeblock],
124
+ .dark .fd-page-nav,
125
+ .dark .fd-page-nav-card,
126
+ .dark [class*="page-nav"] a {
127
+ box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
128
+ }
129
+
130
+ .fd-docs-content h1,
131
+ .fd-docs-content h2 {
132
+ max-width: 14ch;
133
+ }
134
+
135
+ .fd-docs-content h1 {
136
+ letter-spacing: -0.055em;
137
+ }
138
+
139
+ .fd-docs-content h2 {
140
+ letter-spacing: -0.04em;
141
+ }
142
+
143
+ .fd-docs-content th {
144
+ background: var(--color-fd-foreground);
145
+ color: var(--color-fd-background);
146
+ }
147
+
148
+ .fd-docs-content :not(pre) > code {
149
+ background: color-mix(in srgb, var(--color-fd-primary) 22%, var(--color-fd-secondary));
150
+ }
151
+
152
+ .fd-hover-link-card {
153
+ box-shadow: 6px 6px 0 var(--color-fd-border);
154
+ }
155
+
156
+ .dark .fd-hover-link-card {
157
+ box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
158
+ }
159
+
160
+ .fd-page-body .fd-table-wrapper,
161
+ .fd-docs-content table {
162
+ border: 3px solid var(--color-fd-border);
163
+ box-shadow: 6px 6px 0 var(--color-fd-border);
164
+ background: var(--color-fd-card);
165
+ }
166
+
167
+ .dark .fd-page-body .fd-table-wrapper,
168
+ .dark .fd-docs-content table {
169
+ box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
170
+ }
171
+
172
+ .fd-docs-content th,
173
+ .fd-page-body th {
174
+ background: var(--color-fd-foreground);
175
+ color: var(--color-fd-background);
176
+ text-transform: uppercase;
177
+ letter-spacing: 0.08em;
178
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
179
+ font-size: 0.74rem;
180
+ }
181
+
182
+ .fd-docs-content td,
183
+ .fd-page-body td {
184
+ font-weight: 550;
185
+ }
186
+
187
+ .fd-docs-content tbody tr:nth-child(odd) td,
188
+ .fd-page-body tbody tr:nth-child(odd) td {
189
+ background: color-mix(in srgb, var(--color-fd-secondary) 72%, white 28%);
190
+ }
191
+
192
+ .dark .fd-docs-content tbody tr:nth-child(odd) td,
193
+ .dark .fd-page-body tbody tr:nth-child(odd) td {
194
+ background: color-mix(in srgb, var(--color-fd-secondary) 92%, black 8%);
195
+ }
196
+
197
+ .fd-docs-content tbody tr:hover td,
198
+ .fd-page-body tbody tr:hover td {
199
+ background: color-mix(in srgb, var(--color-fd-primary) 16%, var(--color-fd-card));
200
+ }
201
+
202
+ .fd-docs-content pre,
203
+ .fd-docs-content .shiki,
204
+ .fd-docs-content [data-codeblock],
205
+ .fd-docs-content .fd-codeblock,
206
+ .fd-ai-code-block {
207
+ border-width: 3px !important;
208
+ box-shadow: 6px 6px 0 var(--color-fd-border);
209
+ background:
210
+ linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 7%, var(--color-fd-card)) 0, var(--color-fd-card) 56px) !important;
211
+ }
212
+
213
+ .dark .fd-docs-content pre,
214
+ .dark .fd-docs-content .shiki,
215
+ .dark .fd-docs-content [data-codeblock],
216
+ .dark .fd-docs-content .fd-codeblock,
217
+ .dark .fd-ai-code-block {
218
+ box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
219
+ background:
220
+ linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 10%, var(--color-fd-card)) 0, var(--color-fd-card) 56px) !important;
221
+ }
222
+
223
+ .fd-codeblock-title {
224
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
225
+ text-transform: uppercase;
226
+ letter-spacing: 0.08em;
227
+ font-size: 0.72rem;
228
+ font-weight: 700;
229
+ padding-block: 0.8rem;
230
+ padding-inline: 1rem;
231
+ border-bottom: 3px solid var(--color-fd-border);
232
+ background: color-mix(in srgb, var(--color-fd-primary) 12%, var(--color-fd-card));
233
+ }
234
+
235
+ .fd-copy-btn,
236
+ .fd-ai-code-copy {
237
+ border: 2px solid var(--color-fd-border) !important;
238
+ border-radius: 0 !important;
239
+ background: var(--color-fd-background) !important;
240
+ color: var(--color-fd-foreground) !important;
241
+ box-shadow: 3px 3px 0 var(--color-fd-border);
242
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
243
+ font-size: 0.7rem;
244
+ letter-spacing: 0.06em;
245
+ text-transform: uppercase;
246
+ }
247
+
248
+ .fd-copy-btn:hover,
249
+ .fd-ai-code-copy:hover {
250
+ background: var(--color-fd-primary) !important;
251
+ color: var(--color-fd-primary-foreground) !important;
252
+ transform: translate(-1px, -1px);
253
+ }
254
+
255
+ .fd-tabs {
256
+ border: 3px solid var(--color-fd-border);
257
+ box-shadow: 6px 6px 0 var(--color-fd-border);
258
+ background: var(--color-fd-card);
259
+ }
260
+
261
+ .dark .fd-tabs {
262
+ box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
263
+ }
264
+
265
+ .fd-tabs-list {
266
+ border-bottom: 3px solid var(--color-fd-border);
267
+ background: var(--color-fd-foreground);
268
+ }
269
+
270
+ .fd-tab-trigger {
271
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
272
+ text-transform: uppercase;
273
+ letter-spacing: 0.08em;
274
+ font-size: 0.72rem;
275
+ color: color-mix(in srgb, var(--color-fd-background) 82%, transparent);
276
+ border-bottom-width: 0;
277
+ }
278
+
279
+ .fd-tab-trigger:hover {
280
+ color: var(--color-fd-background);
281
+ background: color-mix(in srgb, var(--color-fd-primary) 18%, transparent);
282
+ }
283
+
284
+ .fd-tab-trigger.fd-tab-active {
285
+ color: var(--color-fd-primary-foreground);
286
+ background: var(--color-fd-primary);
287
+ box-shadow: inset -3px 0 0 var(--color-fd-border);
288
+ }
289
+
290
+ .fd-callout,
291
+ [class*="fd-callout"] {
292
+ border-width: 3px !important;
293
+ box-shadow: 6px 6px 0 var(--color-fd-border);
294
+ background: color-mix(in srgb, var(--color-fd-secondary) 82%, white 18%);
295
+ }
296
+
297
+ .dark .fd-callout,
298
+ .dark [class*="fd-callout"] {
299
+ box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
300
+ background: color-mix(in srgb, var(--color-fd-secondary) 92%, black 8%);
301
+ }
302
+
303
+ .fd-callout-indicator {
304
+ width: 10px;
305
+ }
306
+
307
+ .fd-callout-title {
308
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
309
+ text-transform: uppercase;
310
+ letter-spacing: 0.08em;
311
+ font-size: 0.72rem;
312
+ }
313
+
314
+ .fd-page-nav,
315
+ .fd-page-nav-card,
316
+ [class*="page-nav"] a,
317
+ .fd-hover-link-card,
318
+ .fd-page-action-menu,
319
+ .fd-ai-dialog,
320
+ .fd-ai-input-wrap,
321
+ .fd-ai-model-dropdown-menu,
322
+ .fd-ai-fm-topbar,
323
+ .fd-ai-fm-input-container,
324
+ .fd-feedback {
325
+ border-width: 3px !important;
326
+ }
327
+
328
+ .fd-page-nav-card:hover,
329
+ [class*="page-nav"] a:hover {
330
+ transform: translate(-2px, -2px);
331
+ }
332
+
333
+ .fd-hover-link-card {
334
+ background:
335
+ linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 10%, var(--color-fd-card)) 0, var(--color-fd-card) 52px);
336
+ }
337
+
338
+ .fd-hover-link-title,
339
+ .fd-hover-link-description + a {
340
+ text-transform: uppercase;
341
+ letter-spacing: 0.04em;
342
+ }
343
+
344
+ .fd-toc-link,
345
+ .fd-toc-clerk .fd-toc-link {
346
+ font-family: var(--fd-font-mono, ui-monospace, monospace);
347
+ text-transform: uppercase;
348
+ letter-spacing: 0.05em;
349
+ font-size: 0.7rem;
350
+ border-left: 2px solid transparent;
351
+ padding-left: 0.75rem;
352
+ }
353
+
354
+ .fd-toc-link:hover,
355
+ .fd-toc-clerk .fd-toc-link:hover {
356
+ border-left-color: var(--color-fd-border);
357
+ background: color-mix(in srgb, var(--color-fd-primary) 12%, transparent);
358
+ }
359
+
360
+ .fd-toc-link-active,
361
+ .fd-toc-clerk .fd-toc-link[data-active="true"] {
362
+ border-left-color: var(--color-fd-primary);
363
+ }