remons-markdown-editor 1.0.0-beta.10 → 1.0.0-beta.11

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/dist/index.css CHANGED
@@ -2,8 +2,8 @@
2
2
  padding: 4px;
3
3
  display: block;
4
4
  min-width: 200px;
5
- background: #fff;
6
- border: 1px solid #e5e7eb;
5
+ background: var(--remons-md-editor-bg-picker);
6
+ border: 1px solid var(--remons-md-editor-color-border-light);
7
7
  border-radius: 6px;
8
8
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
9
9
  }
@@ -16,19 +16,19 @@
16
16
  .index-module__grid___tCZ-r .index-module__cell___vTDQz {
17
17
  width: 24px;
18
18
  height: 24px;
19
- border: 1px solid #e8e8e8;
19
+ border: 1px solid var(--remons-md-editor-color-border-light);
20
20
  border-radius: 2px;
21
21
  background: transparent;
22
22
  cursor: pointer;
23
23
  transition: all 0.1s ease;
24
24
  }
25
25
  .index-module__grid___tCZ-r .index-module__cell___vTDQz.index-module__cellActive___0EYvU {
26
- border-color: #91caff;
27
- background: #ddf4ff;
26
+ border-color: var(--remons-md-editor-color-cell-active);
27
+ background: var(--remons-md-editor-bg-cell-active);
28
28
  }
29
29
  .index-module__hint___dTObk {
30
30
  padding: 12px 16px;
31
- color: #999;
31
+ color: var(--remons-md-editor-color-hint);
32
32
  font-size: 12px;
33
33
  text-align: center;
34
34
  cursor: pointer;
@@ -36,47 +36,98 @@
36
36
  .index-module__label___2CmK1 {
37
37
  margin-top: 8px;
38
38
  font-size: 13px;
39
- color: #666;
39
+ color: var(--remons-md-editor-color-label);
40
40
  font-weight: 500;
41
41
  min-height: 20px;
42
42
  text-align: center;
43
43
  }
44
- html,
45
- body {
46
- margin: 0;
47
- padding: 0;
48
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
49
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
50
- sans-serif;
51
- -webkit-font-smoothing: antialiased;
52
- -moz-osx-font-smoothing: grayscale;
53
- }
54
-
55
- #markdown-editor {
56
- height: 100vh;
57
- width: 100vw;
58
- overflow: hidden;
59
- }
60
-
61
- /* ===== CSS 自定义属性(主题变量) ===== */
62
- /* 浅色主题(默认) */
63
- :root,
64
- [data-theme="light"] {
65
- --markdown-editor-color-bg-white: rgba(255, 255, 255, 0.6);
66
-
67
- /* ── 边框(毛玻璃) ── */
68
- --markdown-editor-color-border: rgba(255, 255, 255, 0.8);
69
- }
70
-
71
- /* ===== 深色主题 ===== */
72
- [data-theme="dark"] {
73
- --markdown-editor-color-bg-white: rgba(46, 51, 80, 0.8);
74
-
75
- --markdown-editor-color-border: rgba(255, 255, 255, 0.1);
76
- }
77
-
78
- .ant-anchor-link-title {
79
- white-space: inherit !important;
44
+ html,
45
+ body {
46
+ margin: 0;
47
+ padding: 0;
48
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
49
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
50
+ sans-serif;
51
+ -webkit-font-smoothing: antialiased;
52
+ -moz-osx-font-smoothing: grayscale;
53
+ }
54
+
55
+ :where(.css-dev-only-do-not-override-19u5a7b).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
56
+ border: none !important;
57
+ background-color: var(--remons-md-editor-bg-hover) !important;
58
+ color: var(--remons-md-editor-color-text-hover) !important;
59
+ }
60
+
61
+ #markdown-editor {
62
+ height: 100vh;
63
+ width: 100vw;
64
+ overflow: hidden;
65
+ border-radius: 12px;
66
+ background: var(--remons-md-editor-bg-primary);
67
+ }
68
+
69
+ /* ===== CSS 自定义属性(主题变量) ===== */
70
+ /* 浅色主题(默认) */
71
+ :root,
72
+ [data-theme="light"] {
73
+ /* 背景色 */
74
+ --remons-md-editor-bg-primary: #f3f3f3;
75
+ --remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
76
+ --remons-md-editor-bg-hover: #e1e4e8;
77
+ --remons-md-editor-bg-active: #d0d7de;
78
+ --remons-md-editor-bg-fullscreen: #fff;
79
+
80
+ /* 文字颜色 */
81
+ --remons-md-editor-color-text: #24292f;
82
+ --remons-md-editor-color-text-hover: #0969da;
83
+
84
+ /* 边框 */
85
+ --remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
86
+ --remons-md-editor-color-border-light: #d0d7de;
87
+
88
+ /* 焦点 */
89
+ --remons-md-editor-color-focus: #0969da;
90
+ --remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
91
+
92
+ /* 工具选择器 */
93
+ --remons-md-editor-bg-picker: #fff;
94
+ --remons-md-editor-bg-cell-active: #ddf4ff;
95
+ --remons-md-editor-color-cell-active: #91caff;
96
+ --remons-md-editor-color-hint: #999;
97
+ --remons-md-editor-color-label: #666;
98
+ }
99
+
100
+ /* ===== 深色主题 ===== */
101
+ [data-theme="dark"] {
102
+ /* 背景色 */
103
+ --remons-md-editor-bg-primary: #1a1d23;
104
+ --remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
105
+ --remons-md-editor-bg-hover: #4a5163;
106
+ --remons-md-editor-bg-active: #5a6278;
107
+ --remons-md-editor-bg-fullscreen: #1a1d23;
108
+
109
+ /* 文字颜色 */
110
+ --remons-md-editor-color-text: #c9d1d9;
111
+ --remons-md-editor-color-text-hover: #58a6ff;
112
+
113
+ /* 边框 */
114
+ --remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
115
+ --remons-md-editor-color-border-light: #3a3f4b;
116
+
117
+ /* 焦点 */
118
+ --remons-md-editor-color-focus: #58a6ff;
119
+ --remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
120
+
121
+ /* 工具选择器 */
122
+ --remons-md-editor-bg-picker: #2e3350;
123
+ --remons-md-editor-bg-cell-active: #1a3a5c;
124
+ --remons-md-editor-color-cell-active: #58a6ff;
125
+ --remons-md-editor-color-hint: #8b949e;
126
+ --remons-md-editor-color-label: #8b949e;
127
+ }
128
+
129
+ .ant-anchor-link-title {
130
+ white-space: inherit !important;
80
131
  }@font-face {
81
132
  font-family: 'Inter';
82
133
  font-style: normal;
@@ -137,7 +188,6 @@ body {
137
188
  height: 100%;
138
189
  display: flex;
139
190
  flex-direction: column;
140
- background: #f3f3f3;
141
191
  border: 1px solid var(--markdown-editor-color-border);
142
192
  }
143
193
  .markdown-editor-app.fullscreen {
@@ -147,7 +197,7 @@ body {
147
197
  right: 0;
148
198
  bottom: 0;
149
199
  z-index: 9999;
150
- background: #fff;
200
+ background: var(--remons-md-editor-bg-fullscreen);
151
201
  width: 100vw;
152
202
  height: 100vh;
153
203
  }
@@ -156,8 +206,8 @@ body {
156
206
  display: flex;
157
207
  align-items: center;
158
208
  padding: 4px 8px;
159
- background: var(--markdown-editor-color-bg-white);
160
- border-bottom: 1px solid #d0d7de;
209
+ background: var(--remons-md-editor-bg-white);
210
+ border-bottom: 1px solid var(--remons-md-editor-color-border-light);
161
211
  gap: 4px;
162
212
  overflow-x: auto;
163
213
  }
@@ -179,7 +229,7 @@ body {
179
229
  cursor: pointer;
180
230
  font-size: 16px;
181
231
  font-weight: 500;
182
- color: #24292f;
232
+ color: var(--remons-md-editor-color-text);
183
233
  transition: background-color 0.15s, color 0.15s;
184
234
  white-space: nowrap;
185
235
  }
@@ -188,11 +238,11 @@ body {
188
238
  height: 16px;
189
239
  }
190
240
  .toolbar-button:hover {
191
- background: #e1e4e8;
192
- color: #0969da;
241
+ background: var(--remons-md-editor-bg-hover);
242
+ color: var(--remons-md-editor-color-text-hover);
193
243
  }
194
244
  .toolbar-button:active {
195
- background: #d0d7de;
245
+ background: var(--remons-md-editor-bg-active);
196
246
  }
197
247
  .toolbar-button.ant-btn {
198
248
  min-width: 32px;
@@ -202,8 +252,8 @@ body {
202
252
  box-shadow: none !important;
203
253
  }
204
254
  .toolbar-button.ant-btn:hover {
205
- background: #e1e4e8;
206
- color: #0969da;
255
+ background: var(--remons-md-editor-bg-hover);
256
+ color: var(--remons-md-editor-color-text-hover);
207
257
  border-color: transparent !important;
208
258
  box-shadow: none !important;
209
259
  }
@@ -213,11 +263,13 @@ body {
213
263
  }
214
264
  :where(.css-dev-only-do-not-override-u6izyw).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
215
265
  border: none !important;
266
+ background-color: var(--remons-md-editor-bg-hover) !important;
267
+ color: var(--remons-md-editor-color-text-hover) !important;
216
268
  }
217
269
  .toolbar-separator {
218
270
  width: 1px;
219
271
  height: 24px;
220
- background: #d0d7de;
272
+ background: var(--remons-md-editor-color-border-light);
221
273
  margin: 0 4px;
222
274
  }
223
275
  .split-panels {
@@ -248,7 +300,7 @@ body {
248
300
  .md-container {
249
301
  margin: 16px 0;
250
302
  border-radius: 6px;
251
- border: 1px solid #d0d7de;
303
+ border: 1px solid var(--remons-md-editor-color-border-light);
252
304
  overflow: hidden;
253
305
  }
254
306
  /* 编辑弹窗样式 */
@@ -263,20 +315,20 @@ body {
263
315
  margin-bottom: 6px;
264
316
  font-size: 14px;
265
317
  font-weight: 500;
266
- color: #24292f;
318
+ color: var(--remons-md-editor-color-text);
267
319
  }
268
320
  .edit-dialog-input {
269
321
  width: 100%;
270
322
  padding: 6px 10px;
271
323
  font-size: 14px;
272
- border: 1px solid #d0d7de;
324
+ border: 1px solid var(--remons-md-editor-color-border-light);
273
325
  border-radius: 6px;
274
326
  outline: none;
275
327
  transition: border-color 0.15s;
276
328
  }
277
329
  .edit-dialog-input:focus {
278
- border-color: #0969da;
279
- box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
330
+ border-color: var(--remons-md-editor-color-focus);
331
+ box-shadow: 0 0 0 3px var(--remons-md-editor-color-focus-shadow);
280
332
  }
281
333
  .edit-dialog-textarea {
282
334
  resize: vertical;