@farming-labs/theme 0.0.8 → 0.0.9-beta.1

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/theme",
3
- "version": "0.0.8",
3
+ "version": "0.0.9-beta.1",
4
4
  "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
5
5
  "keywords": [
6
6
  "docs",
@@ -103,7 +103,7 @@
103
103
  "next": ">=14.0.0",
104
104
  "tsdown": "^0.20.3",
105
105
  "typescript": "^5.9.3",
106
- "@farming-labs/docs": "0.0.8"
106
+ "@farming-labs/docs": "0.0.9-beta.1"
107
107
  },
108
108
  "peerDependencies": {
109
109
  "@farming-labs/docs": ">=0.0.1",
@@ -122,6 +122,124 @@
122
122
  --color-fd-muted-foreground: hsl(0, 0%, 72%);
123
123
  }
124
124
 
125
+ /* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ─────
126
+ * Use !important where base.css would otherwise win (e.g. background). */
127
+ .fd-ai-model-dropdown-menu {
128
+ box-shadow: none !important;
129
+ }
130
+ .fd-ai-model-dropdown-item {
131
+ padding: 6px 10px !important;
132
+ border: none !important;
133
+ border-radius: var(--radius, 8px) !important;
134
+ }
135
+ .fd-sidebar-search-ai-row {
136
+ display: flex !important;
137
+ gap: 10px !important;
138
+ align-items: stretch !important;
139
+ width: 100% !important;
140
+ margin-bottom: 2px;
141
+ }
142
+
143
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
144
+ flex: 1 !important;
145
+ min-width: 0 !important;
146
+ display: flex !important;
147
+ align-items: center !important;
148
+ gap: 8px !important;
149
+ padding: 6px 12px !important;
150
+ font-size: 0.875rem !important;
151
+ color: var(--color-fd-muted-foreground) !important;
152
+ background: transparent !important;
153
+ border: 1px solid var(--color-fd-border) !important;
154
+ border-radius: 8px !important;
155
+ cursor: pointer;
156
+ transition: background-color 150ms, border-color 150ms, color 150ms;
157
+ }
158
+
159
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
160
+ background: var(--color-fd-accent) !important;
161
+ color: var(--color-fd-foreground) !important;
162
+ }
163
+
164
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
165
+ flex-shrink: 0 !important;
166
+ width: 16px !important;
167
+ height: 16px !important;
168
+ }
169
+
170
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
171
+ display: flex !important;
172
+ gap: 2px !important;
173
+ margin-left: auto !important;
174
+ font-size: 0.75rem !important;
175
+ opacity: 0.8;
176
+ }
177
+
178
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
179
+ font-family: inherit !important;
180
+ font-size: 0.7rem !important;
181
+ padding: 2px 5px !important;
182
+ border: 1px solid var(--color-fd-border) !important;
183
+ border-radius: 4px !important;
184
+ background: var(--color-fd-muted) !important;
185
+ }
186
+
187
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
188
+ display: inline-flex !important;
189
+ align-items: center !important;
190
+ justify-content: center !important;
191
+ width: 38px !important;
192
+ min-width: 38px !important;
193
+ flex-shrink: 0 !important;
194
+ border-radius: 8px !important;
195
+ border: 1px solid var(--color-fd-border) !important;
196
+ background: transparent !important;
197
+ color: var(--color-fd-muted-foreground) !important;
198
+ cursor: pointer;
199
+ transition: background-color 150ms, color 150ms, border-color 150ms;
200
+ }
201
+
202
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
203
+ background: var(--color-fd-accent) !important;
204
+ color: var(--color-fd-primary) !important;
205
+ border-color: var(--color-fd-primary) !important;
206
+ }
207
+
208
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
209
+ width: 16px !important;
210
+ height: 16px !important;
211
+ }
212
+
213
+ /* Dark mode: .dark can be on html or body; row may be inside or outside .fd-sidebar */
214
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
215
+ background: hsl(0 0% 18%) !important;
216
+ border-color: hsl(0 0% 28%) !important;
217
+ color: hsl(0 0% 72%) !important;
218
+ }
219
+
220
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
221
+ background: hsl(0 0% 24%) !important;
222
+ color: hsl(0 0% 95%) !important;
223
+ }
224
+
225
+ .dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
226
+ background: hsl(0 0% 22%) !important;
227
+ border-color: hsl(0 0% 28%) !important;
228
+ color: hsl(0 0% 72%) !important;
229
+ }
230
+
231
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
232
+ background: hsl(0 0% 18%) !important;
233
+ border-color: hsl(0 0% 28%) !important;
234
+ color: hsl(0 0% 72%) !important;
235
+ }
236
+
237
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
238
+ background: hsl(0 0% 24%) !important;
239
+ color: hsl(45 100% 60%) !important;
240
+ border-color: hsl(45 100% 60%) !important;
241
+ }
242
+
125
243
  /* ─── Cards (fumadocs style) ────────────────────────────────────────── */
126
244
 
127
245
  .fd-card {
@@ -92,6 +92,127 @@
92
92
  border-radius: 4px;
93
93
  }
94
94
 
95
+ /* ─── AI model dropdown (default) ────────────────────────────────── */
96
+
97
+ .fd-ai-model-dropdown-menu {
98
+ box-shadow: none !important;
99
+ }
100
+
101
+ .fd-ai-model-dropdown-item {
102
+ padding: 6px 10px !important;
103
+ border: none !important;
104
+ border-radius: var(--radius, 8px) !important;
105
+ }
106
+
107
+ /* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ───── */
108
+
109
+ .fd-sidebar-search-ai-row {
110
+ display: flex !important;
111
+ gap: 10px !important;
112
+ align-items: stretch !important;
113
+ width: 100% !important;
114
+ margin-bottom: 2px;
115
+ }
116
+
117
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
118
+ flex: 1 !important;
119
+ min-width: 0 !important;
120
+ display: flex !important;
121
+ align-items: center !important;
122
+ gap: 8px !important;
123
+ padding: 8px 12px !important;
124
+ font-size: 0.875rem !important;
125
+ color: var(--color-fd-muted-foreground) !important;
126
+ background: transparent !important;
127
+ border: 1px solid var(--color-fd-border) !important;
128
+ border-radius: 8px !important;
129
+ cursor: pointer;
130
+ transition: background-color 150ms, border-color 150ms, color 150ms;
131
+ }
132
+
133
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
134
+ background: var(--color-fd-accent) !important;
135
+ color: var(--color-fd-foreground) !important;
136
+ }
137
+
138
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
139
+ flex-shrink: 0 !important;
140
+ width: 16px !important;
141
+ height: 16px !important;
142
+ }
143
+
144
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
145
+ display: flex !important;
146
+ gap: 2px !important;
147
+ margin-left: auto !important;
148
+ font-size: 0.75rem !important;
149
+ opacity: 0.8;
150
+ }
151
+
152
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
153
+ font-family: inherit !important;
154
+ font-size: 0.7rem !important;
155
+ padding: 2px 5px !important;
156
+ border: 1px solid var(--color-fd-border) !important;
157
+ border-radius: 4px !important;
158
+ background: var(--color-fd-muted) !important;
159
+ }
160
+
161
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
162
+ display: inline-flex !important;
163
+ align-items: center !important;
164
+ justify-content: center !important;
165
+ width: 38px !important;
166
+ min-width: 38px !important;
167
+ flex-shrink: 0 !important;
168
+ border-radius: 8px !important;
169
+ border: 1px solid var(--color-fd-border) !important;
170
+ background: transparent !important;
171
+ color: var(--color-fd-muted-foreground) !important;
172
+ cursor: pointer;
173
+ transition: background-color 150ms, color 150ms, border-color 150ms;
174
+ }
175
+
176
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
177
+ background: var(--color-fd-accent) !important;
178
+ color: var(--color-fd-primary) !important;
179
+ border-color: var(--color-fd-primary) !important;
180
+ }
181
+
182
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
183
+ width: 16px !important;
184
+ height: 16px !important;
185
+ }
186
+
187
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
188
+ background: hsl(0 0% 18%) !important;
189
+ border-color: hsl(0 0% 28%) !important;
190
+ color: hsl(0 0% 72%) !important;
191
+ }
192
+
193
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
194
+ background: hsl(0 0% 24%) !important;
195
+ color: hsl(0 0% 95%) !important;
196
+ }
197
+
198
+ .dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
199
+ background: hsl(0 0% 22%) !important;
200
+ border-color: hsl(0 0% 28%) !important;
201
+ color: hsl(0 0% 72%) !important;
202
+ }
203
+
204
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
205
+ background: hsl(0 0% 18%) !important;
206
+ border-color: hsl(0 0% 28%) !important;
207
+ color: hsl(0 0% 72%) !important;
208
+ }
209
+
210
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
211
+ background: hsl(0 0% 24%) !important;
212
+ color: var(--color-fd-primary) !important;
213
+ border-color: var(--color-fd-primary) !important;
214
+ }
215
+
95
216
  /* ─── Omni Command Palette (default theme) ──────────────────────── */
96
217
 
97
218
  .omni-content {
package/styles/shiny.css CHANGED
@@ -163,6 +163,127 @@
163
163
  border-radius: 6px;
164
164
  }
165
165
 
166
+ /* ─── AI model dropdown (shiny) ──────────────────────────────────────── */
167
+
168
+ .fd-ai-model-dropdown-menu {
169
+ box-shadow: none !important;
170
+ }
171
+
172
+ .fd-ai-model-dropdown-item {
173
+ padding: 6px 10px !important;
174
+ border: none !important;
175
+ border-radius: var(--radius, 8px) !important;
176
+ }
177
+
178
+ /* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ───── */
179
+
180
+ .fd-sidebar-search-ai-row {
181
+ display: flex !important;
182
+ gap: 10px !important;
183
+ align-items: stretch !important;
184
+ width: 100% !important;
185
+ margin-bottom: 2px;
186
+ }
187
+
188
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
189
+ flex: 1 !important;
190
+ min-width: 0 !important;
191
+ display: flex !important;
192
+ align-items: center !important;
193
+ gap: 8px !important;
194
+ padding: 8px 12px !important;
195
+ font-size: 0.875rem !important;
196
+ color: var(--color-fd-muted-foreground) !important;
197
+ background: transparent !important;
198
+ border: 1px solid var(--color-fd-border) !important;
199
+ border-radius: 8px !important;
200
+ cursor: pointer;
201
+ transition: background-color 150ms, border-color 150ms, color 150ms;
202
+ }
203
+
204
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
205
+ background: var(--color-fd-accent) !important;
206
+ color: var(--color-fd-foreground) !important;
207
+ }
208
+
209
+ .fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
210
+ flex-shrink: 0 !important;
211
+ width: 16px !important;
212
+ height: 16px !important;
213
+ }
214
+
215
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
216
+ display: flex !important;
217
+ gap: 2px !important;
218
+ margin-left: auto !important;
219
+ font-size: 0.75rem !important;
220
+ opacity: 0.8;
221
+ }
222
+
223
+ .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
224
+ font-family: inherit !important;
225
+ font-size: 0.7rem !important;
226
+ padding: 2px 5px !important;
227
+ border: 1px solid var(--color-fd-border) !important;
228
+ border-radius: 4px !important;
229
+ background: var(--color-fd-muted) !important;
230
+ }
231
+
232
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
233
+ display: inline-flex !important;
234
+ align-items: center !important;
235
+ justify-content: center !important;
236
+ width: 38px !important;
237
+ min-width: 38px !important;
238
+ flex-shrink: 0 !important;
239
+ border-radius: 8px !important;
240
+ border: 1px solid var(--color-fd-border) !important;
241
+ background: transparent !important;
242
+ color: var(--color-fd-muted-foreground) !important;
243
+ cursor: pointer;
244
+ transition: background-color 150ms, color 150ms, border-color 150ms;
245
+ }
246
+
247
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
248
+ background: var(--color-fd-accent) !important;
249
+ color: var(--color-fd-primary) !important;
250
+ border-color: var(--color-fd-primary) !important;
251
+ }
252
+
253
+ .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
254
+ width: 16px !important;
255
+ height: 16px !important;
256
+ }
257
+
258
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
259
+ background: var(--color-fd-secondary) !important;
260
+ border-color: var(--color-fd-border) !important;
261
+ color: var(--color-fd-muted-foreground) !important;
262
+ }
263
+
264
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
265
+ background: var(--color-fd-accent) !important;
266
+ color: var(--color-fd-foreground) !important;
267
+ }
268
+
269
+ .dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
270
+ background: var(--color-fd-muted) !important;
271
+ border-color: var(--color-fd-border) !important;
272
+ color: var(--color-fd-muted-foreground) !important;
273
+ }
274
+
275
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
276
+ background: var(--color-fd-secondary) !important;
277
+ border-color: var(--color-fd-border) !important;
278
+ color: var(--color-fd-muted-foreground) !important;
279
+ }
280
+
281
+ .dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
282
+ background: var(--color-fd-accent) !important;
283
+ color: var(--color-fd-primary) !important;
284
+ border-color: var(--color-fd-primary) !important;
285
+ }
286
+
166
287
  /* ─── Sidebar shiny overrides ────────────────────────────────────────── */
167
288
 
168
289
  :root .fd-sidebar {