remons-markdown-editor 1.0.0-beta.9 → 1.0.0

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,7 +36,7 @@
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;
@@ -62,17 +62,60 @@ body {
62
62
  /* 浅色主题(默认) */
63
63
  :root,
64
64
  [data-theme="light"] {
65
- --markdown-editor-color-bg-white: rgba(255, 255, 255, 0.6);
65
+ /* 背景色 */
66
+ --remons-md-editor-bg-primary: #f3f3f3;
67
+ --remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
68
+ --remons-md-editor-bg-hover: #e1e4e8;
69
+ --remons-md-editor-bg-active: #d0d7de;
70
+ --remons-md-editor-bg-fullscreen: #fff;
66
71
 
67
- /* ── 边框(毛玻璃) ── */
68
- --markdown-editor-color-border: rgba(255, 255, 255, 0.8);
72
+ /* 文字颜色 */
73
+ --remons-md-editor-color-text: #24292f;
74
+ --remons-md-editor-color-text-hover: #0969da;
75
+
76
+ /* 边框 */
77
+ --remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
78
+ --remons-md-editor-color-border-light: #d0d7de;
79
+
80
+ /* 焦点 */
81
+ --remons-md-editor-color-focus: #0969da;
82
+ --remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
83
+
84
+ /* 工具选择器 */
85
+ --remons-md-editor-bg-picker: #fff;
86
+ --remons-md-editor-bg-cell-active: #ddf4ff;
87
+ --remons-md-editor-color-cell-active: #91caff;
88
+ --remons-md-editor-color-hint: #999;
89
+ --remons-md-editor-color-label: #666;
69
90
  }
70
91
 
71
92
  /* ===== 深色主题 ===== */
72
93
  [data-theme="dark"] {
73
- --markdown-editor-color-bg-white: rgba(46, 51, 80, 0.8);
94
+ /* 背景色 */
95
+ --remons-md-editor-bg-primary: #1a1d23;
96
+ --remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
97
+ --remons-md-editor-bg-hover: #4a5163;
98
+ --remons-md-editor-bg-active: #5a6278;
99
+ --remons-md-editor-bg-fullscreen: #1a1d23;
100
+
101
+ /* 文字颜色 */
102
+ --remons-md-editor-color-text: #c9d1d9;
103
+ --remons-md-editor-color-text-hover: #58a6ff;
74
104
 
75
- --markdown-editor-color-border: rgba(255, 255, 255, 0.1);
105
+ /* 边框 */
106
+ --remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
107
+ --remons-md-editor-color-border-light: #3a3f4b;
108
+
109
+ /* 焦点 */
110
+ --remons-md-editor-color-focus: #58a6ff;
111
+ --remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
112
+
113
+ /* 工具选择器 */
114
+ --remons-md-editor-bg-picker: #2e3350;
115
+ --remons-md-editor-bg-cell-active: #1a3a5c;
116
+ --remons-md-editor-color-cell-active: #58a6ff;
117
+ --remons-md-editor-color-hint: #8b949e;
118
+ --remons-md-editor-color-label: #8b949e;
76
119
  }
77
120
 
78
121
  .ant-anchor-link-title {
@@ -110,34 +153,41 @@ body {
110
153
  font-style: normal;
111
154
  font-weight: 400;
112
155
  font-display: swap;
113
- src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf) format('truetype');
156
+ src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf) format('truetype');
114
157
  }
115
158
  @font-face {
116
159
  font-family: 'Noto Sans SC';
117
160
  font-style: normal;
118
161
  font-weight: 500;
119
162
  font-display: swap;
120
- src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG-3FnYw.ttf) format('truetype');
163
+ src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG-3FnYw.ttf) format('truetype');
121
164
  }
122
165
  @font-face {
123
166
  font-family: 'Noto Sans SC';
124
167
  font-style: normal;
125
168
  font-weight: 600;
126
169
  font-display: swap;
127
- src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGwHCnYw.ttf) format('truetype');
170
+ src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGwHCnYw.ttf) format('truetype');
128
171
  }
129
172
  @font-face {
130
173
  font-family: 'Noto Sans SC';
131
174
  font-style: normal;
132
175
  font-weight: 700;
133
176
  font-display: swap;
134
- src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGzjCnYw.ttf) format('truetype');
177
+ src: url(https://fonts.gstatic.com/s/notosanssc/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGzjCnYw.ttf) format('truetype');
135
178
  }
136
179
  .markdown-editor-app {
137
180
  height: 100%;
138
181
  display: flex;
139
182
  flex-direction: column;
140
183
  border: 1px solid var(--markdown-editor-color-border);
184
+ border-radius: 12px;
185
+ background: var(--remons-md-editor-bg-primary);
186
+ }
187
+ .markdown-editor-app .ant-btn:hover {
188
+ border: none !important;
189
+ background-color: var(--remons-md-editor-bg-hover) !important;
190
+ color: var(--remons-md-editor-color-text-hover) !important;
141
191
  }
142
192
  .markdown-editor-app.fullscreen {
143
193
  position: fixed;
@@ -146,7 +196,7 @@ body {
146
196
  right: 0;
147
197
  bottom: 0;
148
198
  z-index: 9999;
149
- background: #fff;
199
+ background: var(--remons-md-editor-bg-fullscreen);
150
200
  width: 100vw;
151
201
  height: 100vh;
152
202
  }
@@ -155,8 +205,8 @@ body {
155
205
  display: flex;
156
206
  align-items: center;
157
207
  padding: 4px 8px;
158
- background: var(--markdown-editor-color-bg-white);
159
- border-bottom: 1px solid #d0d7de;
208
+ background: var(--remons-md-editor-bg-white);
209
+ border-bottom: 1px solid var(--remons-md-editor-color-border-light);
160
210
  gap: 4px;
161
211
  overflow-x: auto;
162
212
  }
@@ -178,7 +228,7 @@ body {
178
228
  cursor: pointer;
179
229
  font-size: 16px;
180
230
  font-weight: 500;
181
- color: #24292f;
231
+ color: var(--remons-md-editor-color-text);
182
232
  transition: background-color 0.15s, color 0.15s;
183
233
  white-space: nowrap;
184
234
  }
@@ -187,11 +237,11 @@ body {
187
237
  height: 16px;
188
238
  }
189
239
  .toolbar-button:hover {
190
- background: #e1e4e8;
191
- color: #0969da;
240
+ background: var(--remons-md-editor-bg-hover);
241
+ color: var(--remons-md-editor-color-text-hover);
192
242
  }
193
243
  .toolbar-button:active {
194
- background: #d0d7de;
244
+ background: var(--remons-md-editor-bg-active);
195
245
  }
196
246
  .toolbar-button.ant-btn {
197
247
  min-width: 32px;
@@ -201,8 +251,8 @@ body {
201
251
  box-shadow: none !important;
202
252
  }
203
253
  .toolbar-button.ant-btn:hover {
204
- background: #e1e4e8;
205
- color: #0969da;
254
+ background: var(--remons-md-editor-bg-hover);
255
+ color: var(--remons-md-editor-color-text-hover);
206
256
  border-color: transparent !important;
207
257
  box-shadow: none !important;
208
258
  }
@@ -212,11 +262,13 @@ body {
212
262
  }
213
263
  :where(.css-dev-only-do-not-override-u6izyw).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
214
264
  border: none !important;
265
+ background-color: var(--remons-md-editor-bg-hover) !important;
266
+ color: var(--remons-md-editor-color-text-hover) !important;
215
267
  }
216
268
  .toolbar-separator {
217
269
  width: 1px;
218
270
  height: 24px;
219
- background: #d0d7de;
271
+ background: var(--remons-md-editor-color-border-light);
220
272
  margin: 0 4px;
221
273
  }
222
274
  .split-panels {
@@ -247,7 +299,7 @@ body {
247
299
  .md-container {
248
300
  margin: 16px 0;
249
301
  border-radius: 6px;
250
- border: 1px solid #d0d7de;
302
+ border: 1px solid var(--remons-md-editor-color-border-light);
251
303
  overflow: hidden;
252
304
  }
253
305
  /* 编辑弹窗样式 */
@@ -262,20 +314,20 @@ body {
262
314
  margin-bottom: 6px;
263
315
  font-size: 14px;
264
316
  font-weight: 500;
265
- color: #24292f;
317
+ color: var(--remons-md-editor-color-text);
266
318
  }
267
319
  .edit-dialog-input {
268
320
  width: 100%;
269
321
  padding: 6px 10px;
270
322
  font-size: 14px;
271
- border: 1px solid #d0d7de;
323
+ border: 1px solid var(--remons-md-editor-color-border-light);
272
324
  border-radius: 6px;
273
325
  outline: none;
274
326
  transition: border-color 0.15s;
275
327
  }
276
328
  .edit-dialog-input:focus {
277
- border-color: #0969da;
278
- box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
329
+ border-color: var(--remons-md-editor-color-focus);
330
+ box-shadow: 0 0 0 3px var(--remons-md-editor-color-focus-shadow);
279
331
  }
280
332
  .edit-dialog-textarea {
281
333
  resize: vertical;