@zm-editor/react 0.1.2 → 0.1.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 (7) hide show
  1. package/README.ko.md +260 -260
  2. package/README.md +300 -300
  3. package/dist/index.js +100 -74
  4. package/dist/styles.css +8078 -8078
  5. package/dist/variables.css +480 -480
  6. package/package.json +8 -8
  7. package/LICENSE +0 -21
package/dist/variables.css CHANGED
@@ -1,480 +1,480 @@
1
- /**
2
- * @zm-editor/react - CSS Variables (Design Tokens)
3
- *
4
- * Customize zm-editor by overriding these CSS variables in your application.
5
- *
6
- * Example:
7
- * :root {
8
- * --zm-colors-editor-background: #ffffff;
9
- * --zm-colors-editor-text: #374151;
10
- * }
11
- *
12
- * .dark, [data-theme="dark"] {
13
- * --zm-colors-editor-background: #1f2937;
14
- * --zm-colors-editor-text: #d1d5db;
15
- * }
16
- */
17
-
18
- :root {
19
- /* ====================================
20
- * Editor Base Colors
21
- * ==================================== */
22
- --zm-colors-editor-background: #ffffff;
23
- --zm-colors-editor-text: #374151;
24
- --zm-colors-editor-text-muted: #6b7280;
25
- --zm-colors-editor-border: #e5e7eb;
26
- --zm-colors-editor-border-hover: #d1d5db;
27
-
28
- /* Heading Colors */
29
- --zm-colors-heading: #111827;
30
-
31
- /* ====================================
32
- * Menu & UI Colors
33
- * ==================================== */
34
- --zm-colors-menu-background: #ffffff;
35
- --zm-colors-menu-text: #374151;
36
- --zm-colors-menu-text-muted: #6b7280;
37
- --zm-colors-menu-border: #e5e7eb;
38
- --zm-colors-menu-hover: #f3f4f6;
39
- --zm-colors-menu-selected: #eff6ff;
40
- --zm-colors-menu-selected-text: #2563eb;
41
-
42
- /* ====================================
43
- * Interactive Elements
44
- * ==================================== */
45
- --zm-colors-primary: #3b82f6;
46
- --zm-colors-primary-hover: #2563eb;
47
- --zm-colors-primary-text: #ffffff;
48
- --zm-colors-secondary: #6b7280;
49
- --zm-colors-secondary-hover: #4b5563;
50
-
51
- /* ====================================
52
- * Code Block Colors
53
- * ==================================== */
54
- --zm-colors-code-background: #f3f4f6;
55
- --zm-colors-code-text: #374151;
56
- --zm-colors-codeblock-background: #1f2937;
57
- --zm-colors-codeblock-text: #f9fafb;
58
- --zm-colors-codeblock-header: #374151;
59
- --zm-colors-codeblock-border: #4b5563;
60
-
61
- /* ====================================
62
- * Blockquote Colors
63
- * ==================================== */
64
- --zm-colors-blockquote-border: #e5e7eb;
65
- --zm-colors-blockquote-text: #6b7280;
66
- --zm-colors-blockquote-background: transparent;
67
-
68
- /* ====================================
69
- * Link Colors
70
- * ==================================== */
71
- --zm-colors-link: #3b82f6;
72
- --zm-colors-link-hover: #2563eb;
73
-
74
- /* ====================================
75
- * Highlight Colors
76
- * ==================================== */
77
- --zm-colors-highlight-yellow: #fef3c7;
78
- --zm-colors-highlight-green: #d1fae5;
79
- --zm-colors-highlight-blue: #dbeafe;
80
- --zm-colors-highlight-red: #fee2e2;
81
- --zm-colors-highlight-purple: #ede9fe;
82
-
83
- /* ====================================
84
- * Status Colors
85
- * ==================================== */
86
- --zm-colors-success: #10b981;
87
- --zm-colors-success-background: #ecfdf5;
88
- --zm-colors-warning: #f59e0b;
89
- --zm-colors-warning-background: #fffbeb;
90
- --zm-colors-error: #ef4444;
91
- --zm-colors-error-background: #fef2f2;
92
- --zm-colors-info: #3b82f6;
93
- --zm-colors-info-background: #eff6ff;
94
-
95
- /* ====================================
96
- * Callout Colors
97
- * ==================================== */
98
- --zm-colors-callout-note-background: #eff6ff;
99
- --zm-colors-callout-note-border: #3b82f6;
100
- --zm-colors-callout-note-icon: #3b82f6;
101
- --zm-colors-callout-tip-background: #ecfdf5;
102
- --zm-colors-callout-tip-border: #10b981;
103
- --zm-colors-callout-tip-icon: #10b981;
104
- --zm-colors-callout-warning-background: #fffbeb;
105
- --zm-colors-callout-warning-border: #f59e0b;
106
- --zm-colors-callout-warning-icon: #f59e0b;
107
- --zm-colors-callout-danger-background: #fef2f2;
108
- --zm-colors-callout-danger-border: #ef4444;
109
- --zm-colors-callout-danger-icon: #ef4444;
110
-
111
- /* ====================================
112
- * Terminal Colors
113
- * ==================================== */
114
- --zm-colors-terminal-background: #1f2937;
115
- --zm-colors-terminal-text: #f9fafb;
116
- --zm-colors-terminal-header: #374151;
117
- --zm-colors-terminal-prompt: #10b981;
118
- --zm-colors-terminal-border: #4b5563;
119
-
120
- /* ====================================
121
- * Table Colors
122
- * ==================================== */
123
- --zm-colors-table-border: #e5e7eb;
124
- --zm-colors-table-header-background: #f9fafb;
125
- --zm-colors-table-header-text: #374151;
126
- --zm-colors-table-cell-background: transparent;
127
- --zm-colors-table-selected: rgba(59, 130, 246, 0.1);
128
-
129
- /* ====================================
130
- * Image Colors
131
- * ==================================== */
132
- --zm-colors-image-border: #e5e7eb;
133
- --zm-colors-image-selected: #3b82f6;
134
- --zm-colors-image-caption: #6b7280;
135
-
136
- /* ====================================
137
- * Horizontal Rule
138
- * ==================================== */
139
- --zm-colors-hr: #e5e7eb;
140
- --zm-colors-hr-hover: #d1d5db;
141
-
142
- /* ====================================
143
- * Placeholder
144
- * ==================================== */
145
- --zm-colors-placeholder: #9ca3af;
146
-
147
- /* ====================================
148
- * Bubble Menu
149
- * ==================================== */
150
- --zm-colors-bubble-background: #1f2937;
151
- --zm-colors-bubble-text: #f9fafb;
152
- --zm-colors-bubble-border: #374151;
153
- --zm-colors-bubble-hover: #374151;
154
- --zm-colors-bubble-active: #3b82f6;
155
-
156
- /* ====================================
157
- * Slash Command Menu
158
- * ==================================== */
159
- --zm-colors-slash-background: #ffffff;
160
- --zm-colors-slash-text: #374151;
161
- --zm-colors-slash-text-muted: #6b7280;
162
- --zm-colors-slash-border: #e5e7eb;
163
- --zm-colors-slash-hover: #f3f4f6;
164
- --zm-colors-slash-selected: #eff6ff;
165
- --zm-colors-slash-icon: #6b7280;
166
-
167
- /* ====================================
168
- * Tooltip
169
- * ==================================== */
170
- --zm-colors-tooltip-background: #1f2937;
171
- --zm-colors-tooltip-text: #f9fafb;
172
-
173
- /* ====================================
174
- * Spacing (can be overridden)
175
- * ==================================== */
176
- --zm-spacing-xs: 0.25rem;
177
- --zm-spacing-sm: 0.5rem;
178
- --zm-spacing-md: 1rem;
179
- --zm-spacing-lg: 1.5rem;
180
- --zm-spacing-xl: 2rem;
181
-
182
- /* ====================================
183
- * Border Radius
184
- * ==================================== */
185
- --zm-radius-sm: 4px;
186
- --zm-radius-md: 6px;
187
- --zm-radius-lg: 8px;
188
- --zm-radius-xl: 12px;
189
-
190
- /* ====================================
191
- * Typography
192
- * ==================================== */
193
- --zm-font-family-sans: ui-sans-serif, system-ui, sans-serif;
194
- --zm-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
195
- --zm-font-size-xs: 0.75rem;
196
- --zm-font-size-sm: 0.875rem;
197
- --zm-font-size-base: 1rem;
198
- --zm-font-size-lg: 1.125rem;
199
- --zm-font-size-xl: 1.25rem;
200
- --zm-font-size-2xl: 1.5rem;
201
- --zm-font-size-3xl: 2rem;
202
- --zm-line-height: 1.6;
203
-
204
- /* ====================================
205
- * Shadows
206
- * ==================================== */
207
- --zm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
208
- --zm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
209
- --zm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
210
-
211
- /* ====================================
212
- * Transitions
213
- * ==================================== */
214
- --zm-transition-fast: 150ms;
215
- --zm-transition-normal: 200ms;
216
- --zm-transition-slow: 300ms;
217
- }
218
-
219
- /* ====================================
220
- * Dark Mode Variables
221
- * ==================================== */
222
- .dark,
223
- [data-theme='dark'] {
224
- /* Editor Base Colors */
225
- --zm-colors-editor-background: #1f2937;
226
- --zm-colors-editor-text: #d1d5db;
227
- --zm-colors-editor-text-muted: #9ca3af;
228
- --zm-colors-editor-border: #374151;
229
- --zm-colors-editor-border-hover: #4b5563;
230
-
231
- /* Heading Colors */
232
- --zm-colors-heading: #f3f4f6;
233
-
234
- /* Menu & UI Colors */
235
- --zm-colors-menu-background: #1f2937;
236
- --zm-colors-menu-text: #d1d5db;
237
- --zm-colors-menu-text-muted: #9ca3af;
238
- --zm-colors-menu-border: #374151;
239
- --zm-colors-menu-hover: #374151;
240
- --zm-colors-menu-selected: #1e3a5f;
241
- --zm-colors-menu-selected-text: #60a5fa;
242
-
243
- /* Interactive Elements */
244
- --zm-colors-primary: #3b82f6;
245
- --zm-colors-primary-hover: #60a5fa;
246
- --zm-colors-primary-text: #ffffff;
247
- --zm-colors-secondary: #9ca3af;
248
- --zm-colors-secondary-hover: #d1d5db;
249
-
250
- /* Code Block Colors */
251
- --zm-colors-code-background: #374151;
252
- --zm-colors-code-text: #e5e7eb;
253
- --zm-colors-codeblock-background: #111827;
254
- --zm-colors-codeblock-text: #f9fafb;
255
- --zm-colors-codeblock-header: #1f2937;
256
- --zm-colors-codeblock-border: #374151;
257
-
258
- /* Blockquote Colors */
259
- --zm-colors-blockquote-border: #4b5563;
260
- --zm-colors-blockquote-text: #9ca3af;
261
- --zm-colors-blockquote-background: transparent;
262
-
263
- /* Link Colors */
264
- --zm-colors-link: #60a5fa;
265
- --zm-colors-link-hover: #93c5fd;
266
-
267
- /* Highlight Colors (adjusted for dark mode) */
268
- --zm-colors-highlight-yellow: rgba(251, 191, 36, 0.3);
269
- --zm-colors-highlight-green: rgba(52, 211, 153, 0.3);
270
- --zm-colors-highlight-blue: rgba(96, 165, 250, 0.3);
271
- --zm-colors-highlight-red: rgba(248, 113, 113, 0.3);
272
- --zm-colors-highlight-purple: rgba(167, 139, 250, 0.3);
273
-
274
- /* Status Colors */
275
- --zm-colors-success: #34d399;
276
- --zm-colors-success-background: rgba(16, 185, 129, 0.2);
277
- --zm-colors-warning: #fbbf24;
278
- --zm-colors-warning-background: rgba(245, 158, 11, 0.2);
279
- --zm-colors-error: #f87171;
280
- --zm-colors-error-background: rgba(239, 68, 68, 0.2);
281
- --zm-colors-info: #60a5fa;
282
- --zm-colors-info-background: rgba(59, 130, 246, 0.2);
283
-
284
- /* Callout Colors */
285
- --zm-colors-callout-note-background: rgba(59, 130, 246, 0.15);
286
- --zm-colors-callout-note-border: #3b82f6;
287
- --zm-colors-callout-note-icon: #60a5fa;
288
- --zm-colors-callout-tip-background: rgba(16, 185, 129, 0.15);
289
- --zm-colors-callout-tip-border: #10b981;
290
- --zm-colors-callout-tip-icon: #34d399;
291
- --zm-colors-callout-warning-background: rgba(245, 158, 11, 0.15);
292
- --zm-colors-callout-warning-border: #f59e0b;
293
- --zm-colors-callout-warning-icon: #fbbf24;
294
- --zm-colors-callout-danger-background: rgba(239, 68, 68, 0.15);
295
- --zm-colors-callout-danger-border: #ef4444;
296
- --zm-colors-callout-danger-icon: #f87171;
297
-
298
- /* Terminal Colors */
299
- --zm-colors-terminal-background: #111827;
300
- --zm-colors-terminal-text: #f9fafb;
301
- --zm-colors-terminal-header: #1f2937;
302
- --zm-colors-terminal-prompt: #34d399;
303
- --zm-colors-terminal-border: #374151;
304
-
305
- /* Table Colors */
306
- --zm-colors-table-border: #374151;
307
- --zm-colors-table-header-background: #1f2937;
308
- --zm-colors-table-header-text: #e5e7eb;
309
- --zm-colors-table-cell-background: transparent;
310
- --zm-colors-table-selected: rgba(59, 130, 246, 0.2);
311
-
312
- /* Image Colors */
313
- --zm-colors-image-border: #374151;
314
- --zm-colors-image-selected: #3b82f6;
315
- --zm-colors-image-caption: #9ca3af;
316
-
317
- /* Horizontal Rule */
318
- --zm-colors-hr: #374151;
319
- --zm-colors-hr-hover: #4b5563;
320
-
321
- /* Placeholder */
322
- --zm-colors-placeholder: #6b7280;
323
-
324
- /* Bubble Menu */
325
- --zm-colors-bubble-background: #111827;
326
- --zm-colors-bubble-text: #f9fafb;
327
- --zm-colors-bubble-border: #374151;
328
- --zm-colors-bubble-hover: #1f2937;
329
- --zm-colors-bubble-active: #3b82f6;
330
-
331
- /* Slash Command Menu */
332
- --zm-colors-slash-background: #1f2937;
333
- --zm-colors-slash-text: #d1d5db;
334
- --zm-colors-slash-text-muted: #9ca3af;
335
- --zm-colors-slash-border: #374151;
336
- --zm-colors-slash-hover: #374151;
337
- --zm-colors-slash-selected: #1e3a5f;
338
- --zm-colors-slash-icon: #9ca3af;
339
-
340
- /* Tooltip */
341
- --zm-colors-tooltip-background: #374151;
342
- --zm-colors-tooltip-text: #f9fafb;
343
-
344
- /* Shadows (lighter for dark mode) */
345
- --zm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
346
- --zm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
347
- --zm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
348
- }
349
-
350
- /* ====================================
351
- * System preference dark mode
352
- * ==================================== */
353
- @media (prefers-color-scheme: dark) {
354
- :root:not(.light):not([data-theme='light']) {
355
- /* Editor Base Colors */
356
- --zm-colors-editor-background: #1f2937;
357
- --zm-colors-editor-text: #d1d5db;
358
- --zm-colors-editor-text-muted: #9ca3af;
359
- --zm-colors-editor-border: #374151;
360
- --zm-colors-editor-border-hover: #4b5563;
361
-
362
- /* Heading Colors */
363
- --zm-colors-heading: #f3f4f6;
364
-
365
- /* Menu & UI Colors */
366
- --zm-colors-menu-background: #1f2937;
367
- --zm-colors-menu-text: #d1d5db;
368
- --zm-colors-menu-text-muted: #9ca3af;
369
- --zm-colors-menu-border: #374151;
370
- --zm-colors-menu-hover: #374151;
371
- --zm-colors-menu-selected: #1e3a5f;
372
- --zm-colors-menu-selected-text: #60a5fa;
373
-
374
- /* Interactive Elements */
375
- --zm-colors-primary: #3b82f6;
376
- --zm-colors-primary-hover: #60a5fa;
377
- --zm-colors-primary-text: #ffffff;
378
- --zm-colors-secondary: #9ca3af;
379
- --zm-colors-secondary-hover: #d1d5db;
380
-
381
- /* Code Block Colors */
382
- --zm-colors-code-background: #374151;
383
- --zm-colors-code-text: #e5e7eb;
384
- --zm-colors-codeblock-background: #111827;
385
- --zm-colors-codeblock-text: #f9fafb;
386
- --zm-colors-codeblock-header: #1f2937;
387
- --zm-colors-codeblock-border: #374151;
388
-
389
- /* Blockquote Colors */
390
- --zm-colors-blockquote-border: #4b5563;
391
- --zm-colors-blockquote-text: #9ca3af;
392
- --zm-colors-blockquote-background: transparent;
393
-
394
- /* Link Colors */
395
- --zm-colors-link: #60a5fa;
396
- --zm-colors-link-hover: #93c5fd;
397
-
398
- /* Highlight Colors */
399
- --zm-colors-highlight-yellow: rgba(251, 191, 36, 0.3);
400
- --zm-colors-highlight-green: rgba(52, 211, 153, 0.3);
401
- --zm-colors-highlight-blue: rgba(96, 165, 250, 0.3);
402
- --zm-colors-highlight-red: rgba(248, 113, 113, 0.3);
403
- --zm-colors-highlight-purple: rgba(167, 139, 250, 0.3);
404
-
405
- /* Status Colors */
406
- --zm-colors-success: #34d399;
407
- --zm-colors-success-background: rgba(16, 185, 129, 0.2);
408
- --zm-colors-warning: #fbbf24;
409
- --zm-colors-warning-background: rgba(245, 158, 11, 0.2);
410
- --zm-colors-error: #f87171;
411
- --zm-colors-error-background: rgba(239, 68, 68, 0.2);
412
- --zm-colors-info: #60a5fa;
413
- --zm-colors-info-background: rgba(59, 130, 246, 0.2);
414
-
415
- /* Callout Colors */
416
- --zm-colors-callout-note-background: rgba(59, 130, 246, 0.15);
417
- --zm-colors-callout-note-border: #3b82f6;
418
- --zm-colors-callout-note-icon: #60a5fa;
419
- --zm-colors-callout-tip-background: rgba(16, 185, 129, 0.15);
420
- --zm-colors-callout-tip-border: #10b981;
421
- --zm-colors-callout-tip-icon: #34d399;
422
- --zm-colors-callout-warning-background: rgba(245, 158, 11, 0.15);
423
- --zm-colors-callout-warning-border: #f59e0b;
424
- --zm-colors-callout-warning-icon: #fbbf24;
425
- --zm-colors-callout-danger-background: rgba(239, 68, 68, 0.15);
426
- --zm-colors-callout-danger-border: #ef4444;
427
- --zm-colors-callout-danger-icon: #f87171;
428
-
429
- /* Terminal Colors */
430
- --zm-colors-terminal-background: #111827;
431
- --zm-colors-terminal-text: #f9fafb;
432
- --zm-colors-terminal-header: #1f2937;
433
- --zm-colors-terminal-prompt: #34d399;
434
- --zm-colors-terminal-border: #374151;
435
-
436
- /* Table Colors */
437
- --zm-colors-table-border: #374151;
438
- --zm-colors-table-header-background: #1f2937;
439
- --zm-colors-table-header-text: #e5e7eb;
440
- --zm-colors-table-cell-background: transparent;
441
- --zm-colors-table-selected: rgba(59, 130, 246, 0.2);
442
-
443
- /* Image Colors */
444
- --zm-colors-image-border: #374151;
445
- --zm-colors-image-selected: #3b82f6;
446
- --zm-colors-image-caption: #9ca3af;
447
-
448
- /* Horizontal Rule */
449
- --zm-colors-hr: #374151;
450
- --zm-colors-hr-hover: #4b5563;
451
-
452
- /* Placeholder */
453
- --zm-colors-placeholder: #6b7280;
454
-
455
- /* Bubble Menu */
456
- --zm-colors-bubble-background: #111827;
457
- --zm-colors-bubble-text: #f9fafb;
458
- --zm-colors-bubble-border: #374151;
459
- --zm-colors-bubble-hover: #1f2937;
460
- --zm-colors-bubble-active: #3b82f6;
461
-
462
- /* Slash Command Menu */
463
- --zm-colors-slash-background: #1f2937;
464
- --zm-colors-slash-text: #d1d5db;
465
- --zm-colors-slash-text-muted: #9ca3af;
466
- --zm-colors-slash-border: #374151;
467
- --zm-colors-slash-hover: #374151;
468
- --zm-colors-slash-selected: #1e3a5f;
469
- --zm-colors-slash-icon: #9ca3af;
470
-
471
- /* Tooltip */
472
- --zm-colors-tooltip-background: #374151;
473
- --zm-colors-tooltip-text: #f9fafb;
474
-
475
- /* Shadows */
476
- --zm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
477
- --zm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
478
- --zm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
479
- }
480
- }
1
+ /**
2
+ * @zm-editor/react - CSS Variables (Design Tokens)
3
+ *
4
+ * Customize zm-editor by overriding these CSS variables in your application.
5
+ *
6
+ * Example:
7
+ * :root {
8
+ * --zm-colors-editor-background: #ffffff;
9
+ * --zm-colors-editor-text: #374151;
10
+ * }
11
+ *
12
+ * .dark, [data-theme="dark"] {
13
+ * --zm-colors-editor-background: #1f2937;
14
+ * --zm-colors-editor-text: #d1d5db;
15
+ * }
16
+ */
17
+
18
+ :root {
19
+ /* ====================================
20
+ * Editor Base Colors
21
+ * ==================================== */
22
+ --zm-colors-editor-background: #ffffff;
23
+ --zm-colors-editor-text: #374151;
24
+ --zm-colors-editor-text-muted: #6b7280;
25
+ --zm-colors-editor-border: #e5e7eb;
26
+ --zm-colors-editor-border-hover: #d1d5db;
27
+
28
+ /* Heading Colors */
29
+ --zm-colors-heading: #111827;
30
+
31
+ /* ====================================
32
+ * Menu & UI Colors
33
+ * ==================================== */
34
+ --zm-colors-menu-background: #ffffff;
35
+ --zm-colors-menu-text: #374151;
36
+ --zm-colors-menu-text-muted: #6b7280;
37
+ --zm-colors-menu-border: #e5e7eb;
38
+ --zm-colors-menu-hover: #f3f4f6;
39
+ --zm-colors-menu-selected: #eff6ff;
40
+ --zm-colors-menu-selected-text: #2563eb;
41
+
42
+ /* ====================================
43
+ * Interactive Elements
44
+ * ==================================== */
45
+ --zm-colors-primary: #3b82f6;
46
+ --zm-colors-primary-hover: #2563eb;
47
+ --zm-colors-primary-text: #ffffff;
48
+ --zm-colors-secondary: #6b7280;
49
+ --zm-colors-secondary-hover: #4b5563;
50
+
51
+ /* ====================================
52
+ * Code Block Colors
53
+ * ==================================== */
54
+ --zm-colors-code-background: #f3f4f6;
55
+ --zm-colors-code-text: #374151;
56
+ --zm-colors-codeblock-background: #1f2937;
57
+ --zm-colors-codeblock-text: #f9fafb;
58
+ --zm-colors-codeblock-header: #374151;
59
+ --zm-colors-codeblock-border: #4b5563;
60
+
61
+ /* ====================================
62
+ * Blockquote Colors
63
+ * ==================================== */
64
+ --zm-colors-blockquote-border: #e5e7eb;
65
+ --zm-colors-blockquote-text: #6b7280;
66
+ --zm-colors-blockquote-background: transparent;
67
+
68
+ /* ====================================
69
+ * Link Colors
70
+ * ==================================== */
71
+ --zm-colors-link: #3b82f6;
72
+ --zm-colors-link-hover: #2563eb;
73
+
74
+ /* ====================================
75
+ * Highlight Colors
76
+ * ==================================== */
77
+ --zm-colors-highlight-yellow: #fef3c7;
78
+ --zm-colors-highlight-green: #d1fae5;
79
+ --zm-colors-highlight-blue: #dbeafe;
80
+ --zm-colors-highlight-red: #fee2e2;
81
+ --zm-colors-highlight-purple: #ede9fe;
82
+
83
+ /* ====================================
84
+ * Status Colors
85
+ * ==================================== */
86
+ --zm-colors-success: #10b981;
87
+ --zm-colors-success-background: #ecfdf5;
88
+ --zm-colors-warning: #f59e0b;
89
+ --zm-colors-warning-background: #fffbeb;
90
+ --zm-colors-error: #ef4444;
91
+ --zm-colors-error-background: #fef2f2;
92
+ --zm-colors-info: #3b82f6;
93
+ --zm-colors-info-background: #eff6ff;
94
+
95
+ /* ====================================
96
+ * Callout Colors
97
+ * ==================================== */
98
+ --zm-colors-callout-note-background: #eff6ff;
99
+ --zm-colors-callout-note-border: #3b82f6;
100
+ --zm-colors-callout-note-icon: #3b82f6;
101
+ --zm-colors-callout-tip-background: #ecfdf5;
102
+ --zm-colors-callout-tip-border: #10b981;
103
+ --zm-colors-callout-tip-icon: #10b981;
104
+ --zm-colors-callout-warning-background: #fffbeb;
105
+ --zm-colors-callout-warning-border: #f59e0b;
106
+ --zm-colors-callout-warning-icon: #f59e0b;
107
+ --zm-colors-callout-danger-background: #fef2f2;
108
+ --zm-colors-callout-danger-border: #ef4444;
109
+ --zm-colors-callout-danger-icon: #ef4444;
110
+
111
+ /* ====================================
112
+ * Terminal Colors
113
+ * ==================================== */
114
+ --zm-colors-terminal-background: #1f2937;
115
+ --zm-colors-terminal-text: #f9fafb;
116
+ --zm-colors-terminal-header: #374151;
117
+ --zm-colors-terminal-prompt: #10b981;
118
+ --zm-colors-terminal-border: #4b5563;
119
+
120
+ /* ====================================
121
+ * Table Colors
122
+ * ==================================== */
123
+ --zm-colors-table-border: #e5e7eb;
124
+ --zm-colors-table-header-background: #f9fafb;
125
+ --zm-colors-table-header-text: #374151;
126
+ --zm-colors-table-cell-background: transparent;
127
+ --zm-colors-table-selected: rgba(59, 130, 246, 0.1);
128
+
129
+ /* ====================================
130
+ * Image Colors
131
+ * ==================================== */
132
+ --zm-colors-image-border: #e5e7eb;
133
+ --zm-colors-image-selected: #3b82f6;
134
+ --zm-colors-image-caption: #6b7280;
135
+
136
+ /* ====================================
137
+ * Horizontal Rule
138
+ * ==================================== */
139
+ --zm-colors-hr: #e5e7eb;
140
+ --zm-colors-hr-hover: #d1d5db;
141
+
142
+ /* ====================================
143
+ * Placeholder
144
+ * ==================================== */
145
+ --zm-colors-placeholder: #9ca3af;
146
+
147
+ /* ====================================
148
+ * Bubble Menu
149
+ * ==================================== */
150
+ --zm-colors-bubble-background: #1f2937;
151
+ --zm-colors-bubble-text: #f9fafb;
152
+ --zm-colors-bubble-border: #374151;
153
+ --zm-colors-bubble-hover: #374151;
154
+ --zm-colors-bubble-active: #3b82f6;
155
+
156
+ /* ====================================
157
+ * Slash Command Menu
158
+ * ==================================== */
159
+ --zm-colors-slash-background: #ffffff;
160
+ --zm-colors-slash-text: #374151;
161
+ --zm-colors-slash-text-muted: #6b7280;
162
+ --zm-colors-slash-border: #e5e7eb;
163
+ --zm-colors-slash-hover: #f3f4f6;
164
+ --zm-colors-slash-selected: #eff6ff;
165
+ --zm-colors-slash-icon: #6b7280;
166
+
167
+ /* ====================================
168
+ * Tooltip
169
+ * ==================================== */
170
+ --zm-colors-tooltip-background: #1f2937;
171
+ --zm-colors-tooltip-text: #f9fafb;
172
+
173
+ /* ====================================
174
+ * Spacing (can be overridden)
175
+ * ==================================== */
176
+ --zm-spacing-xs: 0.25rem;
177
+ --zm-spacing-sm: 0.5rem;
178
+ --zm-spacing-md: 1rem;
179
+ --zm-spacing-lg: 1.5rem;
180
+ --zm-spacing-xl: 2rem;
181
+
182
+ /* ====================================
183
+ * Border Radius
184
+ * ==================================== */
185
+ --zm-radius-sm: 4px;
186
+ --zm-radius-md: 6px;
187
+ --zm-radius-lg: 8px;
188
+ --zm-radius-xl: 12px;
189
+
190
+ /* ====================================
191
+ * Typography
192
+ * ==================================== */
193
+ --zm-font-family-sans: ui-sans-serif, system-ui, sans-serif;
194
+ --zm-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
195
+ --zm-font-size-xs: 0.75rem;
196
+ --zm-font-size-sm: 0.875rem;
197
+ --zm-font-size-base: 1rem;
198
+ --zm-font-size-lg: 1.125rem;
199
+ --zm-font-size-xl: 1.25rem;
200
+ --zm-font-size-2xl: 1.5rem;
201
+ --zm-font-size-3xl: 2rem;
202
+ --zm-line-height: 1.6;
203
+
204
+ /* ====================================
205
+ * Shadows
206
+ * ==================================== */
207
+ --zm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
208
+ --zm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
209
+ --zm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
210
+
211
+ /* ====================================
212
+ * Transitions
213
+ * ==================================== */
214
+ --zm-transition-fast: 150ms;
215
+ --zm-transition-normal: 200ms;
216
+ --zm-transition-slow: 300ms;
217
+ }
218
+
219
+ /* ====================================
220
+ * Dark Mode Variables
221
+ * ==================================== */
222
+ .dark,
223
+ [data-theme='dark'] {
224
+ /* Editor Base Colors */
225
+ --zm-colors-editor-background: #1f2937;
226
+ --zm-colors-editor-text: #d1d5db;
227
+ --zm-colors-editor-text-muted: #9ca3af;
228
+ --zm-colors-editor-border: #374151;
229
+ --zm-colors-editor-border-hover: #4b5563;
230
+
231
+ /* Heading Colors */
232
+ --zm-colors-heading: #f3f4f6;
233
+
234
+ /* Menu & UI Colors */
235
+ --zm-colors-menu-background: #1f2937;
236
+ --zm-colors-menu-text: #d1d5db;
237
+ --zm-colors-menu-text-muted: #9ca3af;
238
+ --zm-colors-menu-border: #374151;
239
+ --zm-colors-menu-hover: #374151;
240
+ --zm-colors-menu-selected: #1e3a5f;
241
+ --zm-colors-menu-selected-text: #60a5fa;
242
+
243
+ /* Interactive Elements */
244
+ --zm-colors-primary: #3b82f6;
245
+ --zm-colors-primary-hover: #60a5fa;
246
+ --zm-colors-primary-text: #ffffff;
247
+ --zm-colors-secondary: #9ca3af;
248
+ --zm-colors-secondary-hover: #d1d5db;
249
+
250
+ /* Code Block Colors */
251
+ --zm-colors-code-background: #374151;
252
+ --zm-colors-code-text: #e5e7eb;
253
+ --zm-colors-codeblock-background: #111827;
254
+ --zm-colors-codeblock-text: #f9fafb;
255
+ --zm-colors-codeblock-header: #1f2937;
256
+ --zm-colors-codeblock-border: #374151;
257
+
258
+ /* Blockquote Colors */
259
+ --zm-colors-blockquote-border: #4b5563;
260
+ --zm-colors-blockquote-text: #9ca3af;
261
+ --zm-colors-blockquote-background: transparent;
262
+
263
+ /* Link Colors */
264
+ --zm-colors-link: #60a5fa;
265
+ --zm-colors-link-hover: #93c5fd;
266
+
267
+ /* Highlight Colors (adjusted for dark mode) */
268
+ --zm-colors-highlight-yellow: rgba(251, 191, 36, 0.3);
269
+ --zm-colors-highlight-green: rgba(52, 211, 153, 0.3);
270
+ --zm-colors-highlight-blue: rgba(96, 165, 250, 0.3);
271
+ --zm-colors-highlight-red: rgba(248, 113, 113, 0.3);
272
+ --zm-colors-highlight-purple: rgba(167, 139, 250, 0.3);
273
+
274
+ /* Status Colors */
275
+ --zm-colors-success: #34d399;
276
+ --zm-colors-success-background: rgba(16, 185, 129, 0.2);
277
+ --zm-colors-warning: #fbbf24;
278
+ --zm-colors-warning-background: rgba(245, 158, 11, 0.2);
279
+ --zm-colors-error: #f87171;
280
+ --zm-colors-error-background: rgba(239, 68, 68, 0.2);
281
+ --zm-colors-info: #60a5fa;
282
+ --zm-colors-info-background: rgba(59, 130, 246, 0.2);
283
+
284
+ /* Callout Colors */
285
+ --zm-colors-callout-note-background: rgba(59, 130, 246, 0.15);
286
+ --zm-colors-callout-note-border: #3b82f6;
287
+ --zm-colors-callout-note-icon: #60a5fa;
288
+ --zm-colors-callout-tip-background: rgba(16, 185, 129, 0.15);
289
+ --zm-colors-callout-tip-border: #10b981;
290
+ --zm-colors-callout-tip-icon: #34d399;
291
+ --zm-colors-callout-warning-background: rgba(245, 158, 11, 0.15);
292
+ --zm-colors-callout-warning-border: #f59e0b;
293
+ --zm-colors-callout-warning-icon: #fbbf24;
294
+ --zm-colors-callout-danger-background: rgba(239, 68, 68, 0.15);
295
+ --zm-colors-callout-danger-border: #ef4444;
296
+ --zm-colors-callout-danger-icon: #f87171;
297
+
298
+ /* Terminal Colors */
299
+ --zm-colors-terminal-background: #111827;
300
+ --zm-colors-terminal-text: #f9fafb;
301
+ --zm-colors-terminal-header: #1f2937;
302
+ --zm-colors-terminal-prompt: #34d399;
303
+ --zm-colors-terminal-border: #374151;
304
+
305
+ /* Table Colors */
306
+ --zm-colors-table-border: #374151;
307
+ --zm-colors-table-header-background: #1f2937;
308
+ --zm-colors-table-header-text: #e5e7eb;
309
+ --zm-colors-table-cell-background: transparent;
310
+ --zm-colors-table-selected: rgba(59, 130, 246, 0.2);
311
+
312
+ /* Image Colors */
313
+ --zm-colors-image-border: #374151;
314
+ --zm-colors-image-selected: #3b82f6;
315
+ --zm-colors-image-caption: #9ca3af;
316
+
317
+ /* Horizontal Rule */
318
+ --zm-colors-hr: #374151;
319
+ --zm-colors-hr-hover: #4b5563;
320
+
321
+ /* Placeholder */
322
+ --zm-colors-placeholder: #6b7280;
323
+
324
+ /* Bubble Menu */
325
+ --zm-colors-bubble-background: #111827;
326
+ --zm-colors-bubble-text: #f9fafb;
327
+ --zm-colors-bubble-border: #374151;
328
+ --zm-colors-bubble-hover: #1f2937;
329
+ --zm-colors-bubble-active: #3b82f6;
330
+
331
+ /* Slash Command Menu */
332
+ --zm-colors-slash-background: #1f2937;
333
+ --zm-colors-slash-text: #d1d5db;
334
+ --zm-colors-slash-text-muted: #9ca3af;
335
+ --zm-colors-slash-border: #374151;
336
+ --zm-colors-slash-hover: #374151;
337
+ --zm-colors-slash-selected: #1e3a5f;
338
+ --zm-colors-slash-icon: #9ca3af;
339
+
340
+ /* Tooltip */
341
+ --zm-colors-tooltip-background: #374151;
342
+ --zm-colors-tooltip-text: #f9fafb;
343
+
344
+ /* Shadows (lighter for dark mode) */
345
+ --zm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
346
+ --zm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
347
+ --zm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
348
+ }
349
+
350
+ /* ====================================
351
+ * System preference dark mode
352
+ * ==================================== */
353
+ @media (prefers-color-scheme: dark) {
354
+ :root:not(.light):not([data-theme='light']) {
355
+ /* Editor Base Colors */
356
+ --zm-colors-editor-background: #1f2937;
357
+ --zm-colors-editor-text: #d1d5db;
358
+ --zm-colors-editor-text-muted: #9ca3af;
359
+ --zm-colors-editor-border: #374151;
360
+ --zm-colors-editor-border-hover: #4b5563;
361
+
362
+ /* Heading Colors */
363
+ --zm-colors-heading: #f3f4f6;
364
+
365
+ /* Menu & UI Colors */
366
+ --zm-colors-menu-background: #1f2937;
367
+ --zm-colors-menu-text: #d1d5db;
368
+ --zm-colors-menu-text-muted: #9ca3af;
369
+ --zm-colors-menu-border: #374151;
370
+ --zm-colors-menu-hover: #374151;
371
+ --zm-colors-menu-selected: #1e3a5f;
372
+ --zm-colors-menu-selected-text: #60a5fa;
373
+
374
+ /* Interactive Elements */
375
+ --zm-colors-primary: #3b82f6;
376
+ --zm-colors-primary-hover: #60a5fa;
377
+ --zm-colors-primary-text: #ffffff;
378
+ --zm-colors-secondary: #9ca3af;
379
+ --zm-colors-secondary-hover: #d1d5db;
380
+
381
+ /* Code Block Colors */
382
+ --zm-colors-code-background: #374151;
383
+ --zm-colors-code-text: #e5e7eb;
384
+ --zm-colors-codeblock-background: #111827;
385
+ --zm-colors-codeblock-text: #f9fafb;
386
+ --zm-colors-codeblock-header: #1f2937;
387
+ --zm-colors-codeblock-border: #374151;
388
+
389
+ /* Blockquote Colors */
390
+ --zm-colors-blockquote-border: #4b5563;
391
+ --zm-colors-blockquote-text: #9ca3af;
392
+ --zm-colors-blockquote-background: transparent;
393
+
394
+ /* Link Colors */
395
+ --zm-colors-link: #60a5fa;
396
+ --zm-colors-link-hover: #93c5fd;
397
+
398
+ /* Highlight Colors */
399
+ --zm-colors-highlight-yellow: rgba(251, 191, 36, 0.3);
400
+ --zm-colors-highlight-green: rgba(52, 211, 153, 0.3);
401
+ --zm-colors-highlight-blue: rgba(96, 165, 250, 0.3);
402
+ --zm-colors-highlight-red: rgba(248, 113, 113, 0.3);
403
+ --zm-colors-highlight-purple: rgba(167, 139, 250, 0.3);
404
+
405
+ /* Status Colors */
406
+ --zm-colors-success: #34d399;
407
+ --zm-colors-success-background: rgba(16, 185, 129, 0.2);
408
+ --zm-colors-warning: #fbbf24;
409
+ --zm-colors-warning-background: rgba(245, 158, 11, 0.2);
410
+ --zm-colors-error: #f87171;
411
+ --zm-colors-error-background: rgba(239, 68, 68, 0.2);
412
+ --zm-colors-info: #60a5fa;
413
+ --zm-colors-info-background: rgba(59, 130, 246, 0.2);
414
+
415
+ /* Callout Colors */
416
+ --zm-colors-callout-note-background: rgba(59, 130, 246, 0.15);
417
+ --zm-colors-callout-note-border: #3b82f6;
418
+ --zm-colors-callout-note-icon: #60a5fa;
419
+ --zm-colors-callout-tip-background: rgba(16, 185, 129, 0.15);
420
+ --zm-colors-callout-tip-border: #10b981;
421
+ --zm-colors-callout-tip-icon: #34d399;
422
+ --zm-colors-callout-warning-background: rgba(245, 158, 11, 0.15);
423
+ --zm-colors-callout-warning-border: #f59e0b;
424
+ --zm-colors-callout-warning-icon: #fbbf24;
425
+ --zm-colors-callout-danger-background: rgba(239, 68, 68, 0.15);
426
+ --zm-colors-callout-danger-border: #ef4444;
427
+ --zm-colors-callout-danger-icon: #f87171;
428
+
429
+ /* Terminal Colors */
430
+ --zm-colors-terminal-background: #111827;
431
+ --zm-colors-terminal-text: #f9fafb;
432
+ --zm-colors-terminal-header: #1f2937;
433
+ --zm-colors-terminal-prompt: #34d399;
434
+ --zm-colors-terminal-border: #374151;
435
+
436
+ /* Table Colors */
437
+ --zm-colors-table-border: #374151;
438
+ --zm-colors-table-header-background: #1f2937;
439
+ --zm-colors-table-header-text: #e5e7eb;
440
+ --zm-colors-table-cell-background: transparent;
441
+ --zm-colors-table-selected: rgba(59, 130, 246, 0.2);
442
+
443
+ /* Image Colors */
444
+ --zm-colors-image-border: #374151;
445
+ --zm-colors-image-selected: #3b82f6;
446
+ --zm-colors-image-caption: #9ca3af;
447
+
448
+ /* Horizontal Rule */
449
+ --zm-colors-hr: #374151;
450
+ --zm-colors-hr-hover: #4b5563;
451
+
452
+ /* Placeholder */
453
+ --zm-colors-placeholder: #6b7280;
454
+
455
+ /* Bubble Menu */
456
+ --zm-colors-bubble-background: #111827;
457
+ --zm-colors-bubble-text: #f9fafb;
458
+ --zm-colors-bubble-border: #374151;
459
+ --zm-colors-bubble-hover: #1f2937;
460
+ --zm-colors-bubble-active: #3b82f6;
461
+
462
+ /* Slash Command Menu */
463
+ --zm-colors-slash-background: #1f2937;
464
+ --zm-colors-slash-text: #d1d5db;
465
+ --zm-colors-slash-text-muted: #9ca3af;
466
+ --zm-colors-slash-border: #374151;
467
+ --zm-colors-slash-hover: #374151;
468
+ --zm-colors-slash-selected: #1e3a5f;
469
+ --zm-colors-slash-icon: #9ca3af;
470
+
471
+ /* Tooltip */
472
+ --zm-colors-tooltip-background: #374151;
473
+ --zm-colors-tooltip-text: #f9fafb;
474
+
475
+ /* Shadows */
476
+ --zm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
477
+ --zm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
478
+ --zm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
479
+ }
480
+ }