lakelib 0.2.3 → 0.2.4

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/dist/lake.css +133 -137
  2. package/dist/lake.min.js +7 -7
  3. package/dist/lake.min.js.map +1 -1
  4. package/lib/lake.css +133 -137
  5. package/lib/lake.js +60 -53
  6. package/lib/lake.js.map +1 -1
  7. package/package.json +1 -1
package/dist/lake.css CHANGED
@@ -1,35 +1,35 @@
1
- .lake-custom-properties {
2
- /* common */
3
- --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
4
- --text-color: #000000e0;
5
- --secondary-text-color: #000000a6;
6
- --disabled-text-color: #00000040;
7
- --border-color: #d9d9d9;
8
- --background-color: #0000000a;
9
- --background-hover-color: #0000000a;
10
- --background-active-color: #0000000d;
11
- --success-color: #52c41a;
12
- --warning-color: #faad14;
13
- --error-color: #ff4d4f;
1
+ :root {
2
+ /* font family */
3
+ --lake-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
4
+ /* common color */
5
+ --lake-text-color: #000000e0;
6
+ --lake-secondary-text-color: #000000a6;
7
+ --lake-border-color: #d9d9d9;
8
+ --lake-background-hover-color: #0000000a;
9
+ --lake-background-active-color: #0000000d;
10
+ --lake-success-color: #52c41a;
11
+ --lake-warning-color: #faad14;
12
+ --lake-error-color: #ff4d4f;
13
+ /* z-index */
14
+ --lake-z-index-popup: 822;
14
15
  /* selection */
15
- --selection-background-color: #1ba2e333;
16
+ --lake-selection-background-color: #1ba2e333;
16
17
  /* link */
17
- --link-color: #1677ff;
18
- --link-hover-color: #69b1ff;
18
+ --lake-link-color: #1677ff;
19
+ --lake-link-hover-color: #69b1ff;
19
20
  /* box */
20
- --box-border-color: #d9d9d9;
21
- --box-border-focus-color: #1677ff;
22
- --box-border-active-color: #faad14;
23
- --box-background-color: #f6f8fa;
21
+ --lake-box-border-color: #d9d9d9;
22
+ --lake-box-border-focus-color: #1677ff;
23
+ --lake-box-background-color: #f6f8fa;
24
24
  /* button */
25
- --button-shadow: 0 2px 0 #00000005;
26
- --button-outline: 2px solid #69b1ff;
25
+ --lake-button-shadow: 0 2px 0 #00000005;
26
+ --lake-button-outline: 2px solid #69b1ff;
27
27
  /* popup */
28
- --popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
28
+ --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
29
29
  /* input form */
30
- --input-border-color: #d9d9d9;
31
- --input-border-hover-color: #69b1ff;
32
- --input-outline: 2px solid #69b1ff;
30
+ --lake-input-border-color: #d9d9d9;
31
+ --lake-input-border-hover-color: #69b1ff;
32
+ --lake-input-outline: 2px solid #69b1ff;
33
33
  }
34
34
 
35
35
  @keyframes lakerotate {
@@ -46,7 +46,7 @@
46
46
  }
47
47
  .lake-container {
48
48
  box-sizing: border-box;
49
- font-family: var(--font-family);
49
+ font-family: var(--lake-font-family);
50
50
  font-size: 16px;
51
51
  font-weight: normal;
52
52
  line-height: 1.45;
@@ -58,7 +58,7 @@
58
58
  .lake-container::selection,
59
59
  .lake-container ::selection {
60
60
  color: inherit;
61
- background: var(--selection-background-color);
61
+ background: var(--lake-selection-background-color);
62
62
  }
63
63
  .lake-container *,
64
64
  .lake-container ::before,
@@ -69,7 +69,7 @@
69
69
  position: absolute;
70
70
  top: 8px;
71
71
  left: 12px;
72
- color: var(--secondary-text-color);
72
+ color: var(--lake-secondary-text-color);
73
73
  content: attr(placeholder);
74
74
  pointer-events: none;
75
75
  }
@@ -181,7 +181,7 @@ lake-box .lake-button-group {
181
181
  lake-box .lake-button-group button {
182
182
  border-radius: 5px;
183
183
  border: 0;
184
- color: var(--text-color);
184
+ color: var(--lake-text-color);
185
185
  background-color: transparent;
186
186
  padding: 0;
187
187
  margin: 0;
@@ -200,8 +200,8 @@ lake-box .lake-button-group button svg {
200
200
  position: absolute;
201
201
  top: 0;
202
202
  left: 0;
203
- z-index: 1;
204
- border: 1px solid var(--border-color);
203
+ z-index: var(--lake-z-index-popup);
204
+ border: 1px solid var(--lake-border-color);
205
205
  border-radius: 5px;
206
206
  background-color: #fff;
207
207
  box-shadow: 0 2px 0 #00000005;
@@ -214,7 +214,7 @@ lake-box .lake-button-group button svg {
214
214
  width: 1px;
215
215
  height: 20px;
216
216
  margin: 0 4px;
217
- border-left: 1px solid var(--border-color);
217
+ border-left: 1px solid var(--lake-border-color);
218
218
  user-select: none;
219
219
  }
220
220
 
@@ -223,7 +223,7 @@ button.lake-button {
223
223
  border: 0;
224
224
  font-family: Arial;
225
225
  font-size: 14px;
226
- color: var(--text-color);
226
+ color: var(--lake-text-color);
227
227
  background-color: #fff;
228
228
  padding: 0;
229
229
  margin: 0 1px;
@@ -233,7 +233,7 @@ button.lake-button {
233
233
  user-select: none;
234
234
  }
235
235
  button.lake-button:focus-visible {
236
- outline: var(--button-outline);
236
+ outline: var(--lake-button-outline);
237
237
  }
238
238
  button.lake-button[disabled] {
239
239
  opacity: 0.25;
@@ -247,22 +247,22 @@ button.lake-button img {
247
247
  margin: 6px;
248
248
  }
249
249
  button.lake-icon-button.lake-button-hovered {
250
- background-color: var(--background-hover-color);
250
+ background-color: var(--lake-background-hover-color);
251
251
  }
252
252
  button.lake-icon-button.lake-button-selected {
253
- background-color: var(--background-active-color);
253
+ background-color: var(--lake-background-active-color);
254
254
  }
255
255
  button.lake-text-button {
256
256
  background-color: transparent;
257
- border: 1px solid var(--border-color);
257
+ border: 1px solid var(--lake-border-color);
258
258
  padding: 8px 16px;
259
259
  line-height: normal;
260
260
  }
261
261
  button.lake-text-button.lake-button-hovered {
262
- background-color: var(--background-hover-color);
262
+ background-color: var(--lake-background-hover-color);
263
263
  }
264
264
  button.lake-text-button.lake-button-selected {
265
- background-color: var(--background-active-color);
265
+ background-color: var(--lake-background-active-color);
266
266
  }
267
267
  button.lake-text-button svg {
268
268
  background-color: transparent;
@@ -285,8 +285,8 @@ button.lake-primary-button.lake-button-hovered {
285
285
 
286
286
  .lake-dropdown {
287
287
  position: relative;
288
- font-family: var(--font-family);
289
- color: var(--text-color);
288
+ font-family: var(--lake-font-family);
289
+ color: var(--lake-text-color);
290
290
  font-size: 14px;
291
291
  user-select: none;
292
292
  }
@@ -295,7 +295,7 @@ button.lake-primary-button.lake-button-hovered {
295
295
  border: 0;
296
296
  font-family: Arial;
297
297
  font-size: 14px;
298
- color: var(--text-color);
298
+ color: var(--lake-text-color);
299
299
  background-color: #fff;
300
300
  padding: 0;
301
301
  display: flex;
@@ -311,7 +311,7 @@ button.lake-primary-button.lake-button-hovered {
311
311
  .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered,
312
312
  .lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered,
313
313
  .lake-dropdown.lake-character-dropdown button.lake-dropdown-title-hovered {
314
- background-color: var(--background-hover-color);
314
+ background-color: var(--lake-background-hover-color);
315
315
  }
316
316
  .lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
317
317
  margin-right: 0;
@@ -322,7 +322,7 @@ button.lake-primary-button.lake-button-hovered {
322
322
  margin: 6px;
323
323
  overflow: hidden;
324
324
  white-space: nowrap;
325
- color: var(--text-color);
325
+ color: var(--lake-text-color);
326
326
  }
327
327
  .lake-dropdown .lake-dropdown-icon {
328
328
  position: relative;
@@ -330,7 +330,7 @@ button.lake-primary-button.lake-button-hovered {
330
330
  border-radius: 5px 0 0 5px;
331
331
  }
332
332
  .lake-dropdown .lake-dropdown-icon-hovered {
333
- background-color: var(--background-hover-color);
333
+ background-color: var(--lake-background-hover-color);
334
334
  }
335
335
  .lake-dropdown .lake-dropdown-icon svg,
336
336
  .lake-dropdown .lake-dropdown-icon img {
@@ -352,35 +352,29 @@ button.lake-primary-button.lake-button-hovered {
352
352
  border-radius: 0 5px 5px 0;
353
353
  }
354
354
  .lake-dropdown .lake-dropdown-down-icon-hovered {
355
- background-color: var(--background-hover-color);
355
+ background-color: var(--lake-background-hover-color);
356
356
  }
357
357
  .lake-dropdown .lake-dropdown-down-icon svg {
358
358
  width: 12px;
359
359
  height: 12px;
360
360
  margin: 8px 2px;
361
- fill: var(--secondary-text-color);
361
+ fill: var(--lake-secondary-text-color);
362
362
  }
363
363
  /* menu */
364
364
  .lake-dropdown .lake-dropdown-menu,
365
365
  .lake-dropdown-menu {
366
- font-family: var(--font-family);
367
- font-size: 14px;
368
- font-weight: normal;
369
- line-height: normal;
370
- color: var(--text-color);
371
- user-select: none;
372
- box-sizing: content-box;
373
366
  position: absolute;
374
367
  top: 30px;
375
368
  left: 0;
376
- z-index: 1;
369
+ z-index: var(--lake-z-index-popup);
377
370
  list-style: none;
378
371
  margin: 0;
379
372
  padding: 6px 0;
380
- border: 1px solid var(--border-color);
373
+ border: 1px solid var(--lake-border-color);
381
374
  border-radius: 5px;
382
375
  background-color: #fff;
383
- box-shadow: var(--popup-shadow);
376
+ box-shadow: var(--lake-popup-shadow);
377
+ user-select: none;
384
378
  display: none;
385
379
  }
386
380
  .lake-dropdown-menu.lake-dropdown-menu-with-scroll {
@@ -399,10 +393,10 @@ button.lake-primary-button.lake-button-hovered {
399
393
  padding: 6px 24px 6px 10px;
400
394
  }
401
395
  .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
402
- background-color: var(--background-hover-color);
396
+ background-color: var(--lake-background-hover-color);
403
397
  }
404
398
  .lake-list-dropdown-menu li.lake-dropdown-item-selected {
405
- background-color: var(--background-active-color);
399
+ background-color: var(--lake-background-active-color);
406
400
  }
407
401
  .lake-list-dropdown-menu li .lake-dropdown-menu-check {
408
402
  line-height: 0;
@@ -434,10 +428,10 @@ button.lake-primary-button.lake-button-hovered {
434
428
  border-radius: 2px;
435
429
  }
436
430
  .lake-icon-dropdown-menu li.lake-dropdown-item-hovered {
437
- background-color: var(--background-hover-color);
431
+ background-color: var(--lake-background-hover-color);
438
432
  }
439
433
  .lake-icon-dropdown-menu li.lake-dropdown-item-selected {
440
- background-color: var(--background-active-color);
434
+ background-color: var(--lake-background-active-color);
441
435
  }
442
436
  .lake-icon-dropdown-menu li .lake-dropdown-menu-check {
443
437
  display: none;
@@ -464,10 +458,10 @@ button.lake-primary-button.lake-button-hovered {
464
458
  border-radius: 2px;
465
459
  }
466
460
  .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
467
- background-color: var(--background-hover-color);
461
+ background-color: var(--lake-background-hover-color);
468
462
  }
469
463
  .lake-character-dropdown-menu li.lake-dropdown-item-selected {
470
- background-color: var(--background-active-color);
464
+ background-color: var(--lake-background-active-color);
471
465
  }
472
466
  .lake-character-dropdown-menu li .lake-dropdown-menu-check {
473
467
  display: none;
@@ -492,10 +486,10 @@ button.lake-primary-button.lake-button-hovered {
492
486
  padding: 0;
493
487
  }
494
488
  .lake-color-dropdown-menu li.lake-dropdown-item-hovered {
495
- background-color: var(--background-hover-color);
489
+ background-color: var(--lake-background-hover-color);
496
490
  }
497
491
  .lake-color-dropdown-menu li.lake-dropdown-item-selected {
498
- background-color: var(--background-active-color);
492
+ background-color: var(--lake-background-active-color);
499
493
  }
500
494
  .lake-color-dropdown-menu li .lake-dropdown-menu-check {
501
495
  position: absolute;
@@ -525,7 +519,7 @@ button.lake-primary-button.lake-button-hovered {
525
519
  .lake-color-dropdown-menu li .lake-dropdown-menu-text {
526
520
  font-size: 0;
527
521
  box-sizing: content-box;
528
- border: 1px solid var(--background-hover-color);
522
+ border: 1px solid var(--lake-background-hover-color);
529
523
  border-radius: 2px;
530
524
  width: 16px;
531
525
  height: 16px;
@@ -548,11 +542,12 @@ button.lake-primary-button.lake-button-hovered {
548
542
  }
549
543
 
550
544
  .lake-popup {
551
- font-family: var(--font-family);
545
+ box-sizing: border-box;
546
+ font-family: var(--lake-font-family);
552
547
  font-size: 14px;
553
548
  font-weight: normal;
554
549
  line-height: normal;
555
- color: var(--text-color);
550
+ color: var(--lake-text-color);
556
551
  }
557
552
  .lake-popup *,
558
553
  .lake-popup ::before,
@@ -560,21 +555,21 @@ button.lake-primary-button.lake-button-hovered {
560
555
  box-sizing: border-box;
561
556
  }
562
557
  .lake-popup button {
563
- box-shadow: var(--button-shadow);
558
+ box-shadow: var(--lake-button-shadow);
564
559
  }
565
560
  .lake-popup input[type="text"] {
566
- font-family: var(--font-family);
561
+ font-family: var(--lake-font-family);
567
562
  font-size: 14px;
568
- color: var(--text-color);
563
+ color: var(--lake-text-color);
569
564
  border-radius: 5px;
570
- border: 1px solid var(--input-border-color);
565
+ border: 1px solid var(--lake-input-border-color);
571
566
  padding: 4px 10px;
572
567
  }
573
568
  .lake-popup input[type="text"]:hover {
574
- border: 1px solid var(--input-border-hover-color);
569
+ border: 1px solid var(--lake-input-border-hover-color);
575
570
  }
576
571
  .lake-popup input[type="text"]:focus-visible {
577
- outline: var(--input-outline);
572
+ outline: var(--lake-input-outline);
578
573
  outline-offset: -2px;
579
574
  }
580
575
  .lake-popup .lake-row {
@@ -585,15 +580,15 @@ button.lake-primary-button.lake-button-hovered {
585
580
  position: absolute;
586
581
  top: 0;
587
582
  left: 0;
588
- z-index: 1;
583
+ z-index: var(--lake-z-index-popup);
589
584
  list-style: none;
590
- border: 1px solid var(--border-color);
585
+ border: 1px solid var(--lake-border-color);
591
586
  border-radius: 5px;
592
587
  margin: 0;
593
588
  padding: 4px 8px;
594
589
  width: fit-content;
595
590
  background-color: #fff;
596
- box-shadow: var(--popup-shadow);
591
+ box-shadow: var(--lake-popup-shadow);
597
592
  display: none;
598
593
  max-height: 180px;
599
594
  overflow-y: scroll;
@@ -610,7 +605,7 @@ button.lake-primary-button.lake-button-hovered {
610
605
  scroll-margin: 4px 0;
611
606
  }
612
607
  .lake-menu .lake-menu-item-selected {
613
- background-color: var(--background-active-color);
608
+ background-color: var(--lake-background-active-color);
614
609
  }
615
610
 
616
611
  .lake-resizer {
@@ -628,7 +623,7 @@ button.lake-primary-button.lake-button-hovered {
628
623
  z-index: 1;
629
624
  border: 1px solid #fff;
630
625
  border-radius: 6px;
631
- background-color: var(--box-border-focus-color);
626
+ background-color: var(--lake-box-border-focus-color);
632
627
  }
633
628
  .lake-resizer-top-left {
634
629
  top: -5px;
@@ -708,24 +703,24 @@ button.lake-primary-button.lake-button-hovered {
708
703
  }
709
704
 
710
705
  .lake-container a {
711
- color: var(--link-color);
706
+ color: var(--lake-link-color);
712
707
  text-decoration: none;
713
708
  }
714
709
  .lake-container a:hover {
715
- color: var(--link-hover-color);
710
+ color: var(--lake-link-hover-color);
716
711
  text-decoration: underline;
717
712
  }
718
713
  .lake-link-popup {
719
714
  position: absolute;
720
715
  top: 0;
721
716
  left: 0;
722
- z-index: 1;
723
- border: 1px solid var(--border-color);
717
+ z-index: var(--lake-z-index-popup);
718
+ border: 1px solid var(--lake-border-color);
724
719
  border-radius: 5px;
725
720
  padding: 16px;
726
721
  width: fit-content;
727
722
  background-color: #fff;
728
- box-shadow: var(--popup-shadow);
723
+ box-shadow: var(--lake-popup-shadow);
729
724
  display: none;
730
725
  }
731
726
  .lake-link-popup .lake-url-row {
@@ -747,11 +742,11 @@ button.lake-primary-button.lake-button-hovered {
747
742
  }
748
743
  .lake-link-popup button[name="copy"] svg:nth-child(2) {
749
744
  display: none;
750
- fill: var(--success-color);
745
+ fill: var(--lake-success-color);
751
746
  }
752
747
  .lake-link-popup button[name="copy"] svg:last-child {
753
748
  display: none;
754
- fill: var(--error-color);
749
+ fill: var(--lake-error-color);
755
750
  }
756
751
 
757
752
  .lake-container ol,
@@ -859,7 +854,7 @@ button.lake-primary-button.lake-button-hovered {
859
854
  background-color: #1890ff;
860
855
  }
861
856
  .lake-container ul[type="checklist"] li[value="false"]::before {
862
- border: 1px solid var(--border-color);
857
+ border: 1px solid var(--lake-border-color);
863
858
  background-color: #fff;
864
859
  }
865
860
  .lake-container ul[type="checklist"] li::after {
@@ -888,13 +883,13 @@ button.lake-primary-button.lake-button-hovered {
888
883
  margin: 0;
889
884
  margin-bottom: 8px;
890
885
  padding: 8px 12px;
891
- color: var(--secondary-text-color);
886
+ color: var(--lake-secondary-text-color);
892
887
  border-left: 4px solid #0505050f;
893
888
  }
894
889
  .lake-container blockquote[type] {
895
890
  margin: 16px 0;
896
891
  padding: 16px 20px;
897
- color: var(--text-color);
892
+ color: var(--lake-text-color);
898
893
  border: 1px solid transparent;
899
894
  border-radius: 8px;
900
895
  }
@@ -920,7 +915,7 @@ button.lake-primary-button.lake-button-hovered {
920
915
  }
921
916
  .lake-container table td {
922
917
  padding: 8px 16px;
923
- border: 1px solid var(--border-color);
918
+ border: 1px solid var(--lake-border-color);
924
919
  }
925
920
 
926
921
  lake-box[name="hr"] {
@@ -938,25 +933,25 @@ lake-box[name="hr"] {
938
933
  cursor: default;
939
934
  }
940
935
  .lake-container[contenteditable="true"] lake-box[name="hr"] .lake-box-hovered .lake-hr {
941
- background-color: var(--box-background-color);
936
+ background-color: var(--lake-box-background-color);
942
937
  }
943
938
  lake-box[name="hr"] .lake-box-selected .lake-hr,
944
939
  lake-box[name="hr"] .lake-box-focused .lake-hr {
945
- background-color: var(--selection-background-color);
940
+ background-color: var(--lake-selection-background-color);
946
941
  }
947
942
  .lake-hr hr {
948
943
  width: 100%;
949
944
  margin: 0;
950
945
  padding: 0;
951
946
  border: 0;
952
- border-top: 1px solid var(--border-color);
947
+ border-top: 1px solid var(--lake-border-color);
953
948
  }
954
949
 
955
950
  /* CodeMirror */
956
951
  .cm-editor {
957
952
  font-size: 14px;
958
953
  border-radius: 5px;
959
- background-color: var(--box-background-color);
954
+ background-color: var(--lake-box-background-color);
960
955
  }
961
956
  .cm-editor.cm-focused {
962
957
  outline: none;
@@ -972,7 +967,7 @@ lake-box[name="codeBlock"] {
972
967
  }
973
968
  lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
974
969
  lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
975
- border-color: var(--box-border-color);
970
+ border-color: var(--lake-box-border-color);
976
971
  }
977
972
  .lake-code-block {
978
973
  position: relative;
@@ -992,10 +987,10 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
992
987
  .lake-code-block .lake-dropdown .lake-dropdown-title {
993
988
  margin: 0;
994
989
  padding-right: 4px;
995
- background-color: var(--box-background-color);
990
+ background-color: var(--lake-box-background-color);
996
991
  }
997
992
  .lake-code-block .lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
998
- background-color: var(--background-active-color);
993
+ background-color: var(--lake-background-active-color);
999
994
  }
1000
995
  .lake-code-block .lake-dropdown .lake-dropdown-text {
1001
996
  margin: 3px 6px;
@@ -1010,9 +1005,9 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
1010
1005
  }
1011
1006
  .lake-code-block-error {
1012
1007
  font-size: 14px;
1013
- color: var(--error-color);
1008
+ color: var(--lake-error-color);
1014
1009
  border-radius: 5px;
1015
- background-color: var(--box-background-color);
1010
+ background-color: var(--lake-box-background-color);
1016
1011
  padding: 16px 20px;
1017
1012
  }
1018
1013
 
@@ -1046,7 +1041,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
1046
1041
  height: 100%;
1047
1042
  }
1048
1043
  lake-box[name="image"] .lake-box-focused .lake-image {
1049
- border-color: var(--box-border-focus-color);
1044
+ border-color: var(--lake-box-border-focus-color);
1050
1045
  }
1051
1046
  /* uploading status */
1052
1047
  .lake-image-uploading .lake-image-img {
@@ -1082,13 +1077,13 @@ lake-box[name="image"] .lake-box-focused .lake-image {
1082
1077
  padding: 16px;
1083
1078
  }
1084
1079
  .lake-image.lake-image-error {
1085
- border: 1px solid var(--box-border-color);
1080
+ border: 1px solid var(--lake-box-border-color);
1086
1081
  }
1087
1082
  .lake-image.lake-image-error ::selection {
1088
1083
  background-color: transparent;
1089
1084
  }
1090
1085
  lake-box[name="image"] .lake-box-selected .lake-image-error {
1091
- background-color: var(--selection-background-color);
1086
+ background-color: var(--lake-selection-background-color);
1092
1087
  }
1093
1088
  .lake-image .lake-error-icon {
1094
1089
  line-height: 0;
@@ -1096,12 +1091,12 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
1096
1091
  margin-bottom: 8px;
1097
1092
  }
1098
1093
  .lake-image .lake-error-icon svg {
1099
- fill: var(--error-color);
1094
+ fill: var(--lake-error-color);
1100
1095
  width: 64px;
1101
1096
  height: 64px;
1102
1097
  }
1103
1098
  .lake-image .lake-error-name {
1104
- color: var(--error-color);
1099
+ color: var(--lake-error-color);
1105
1100
  line-height: normal;
1106
1101
  }
1107
1102
  /* full screen */
@@ -1129,23 +1124,23 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
1129
1124
  .lake-video .lake-video-form {
1130
1125
  padding: 16px;
1131
1126
  line-height: normal;
1132
- border: 1px solid var(--box-border-color);
1127
+ border: 1px solid var(--lake-box-border-color);
1133
1128
  border-radius: 4px;
1134
1129
  }
1135
1130
  .lake-video input[type="text"] {
1136
- font-family: var(--font-family);
1131
+ font-family: var(--lake-font-family);
1137
1132
  font-size: 14px;
1138
- color: var(--text-color);
1133
+ color: var(--lake-text-color);
1139
1134
  border-radius: 5px;
1140
- border: 1px solid var(--input-border-color);
1135
+ border: 1px solid var(--lake-input-border-color);
1141
1136
  padding: 4px 10px;
1142
1137
  width: 100%;
1143
1138
  }
1144
1139
  .lake-video input[type="text"]:hover {
1145
- border: 1px solid var(--input-border-hover-color);
1140
+ border: 1px solid var(--lake-input-border-hover-color);
1146
1141
  }
1147
1142
  .lake-video input[type="text"]:focus-visible {
1148
- outline: var(--input-outline);
1143
+ outline: var(--lake-input-outline);
1149
1144
  outline-offset: -2px;
1150
1145
  }
1151
1146
  .lake-video .lake-row {
@@ -1154,7 +1149,7 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
1154
1149
  .lake-video .lake-desc-row {
1155
1150
  padding-top: 8px;
1156
1151
  padding-bottom: 16px;
1157
- color: var(--secondary-text-color);
1152
+ color: var(--lake-secondary-text-color);
1158
1153
  }
1159
1154
  .lake-video .lake-button-row {
1160
1155
  padding-top: 16px;
@@ -1194,16 +1189,16 @@ lake-box[name="file"] .lake-box-strip {
1194
1189
  .lake-file .lake-file-name {
1195
1190
  line-height: 24px;
1196
1191
  margin-right: 6px;
1197
- color: var(--link-color);
1192
+ color: var(--lake-link-color);
1198
1193
  }
1199
1194
  lake-box[name="file"] .lake-box-hovered .lake-file {
1200
- background-color: var(--box-background-color);
1195
+ background-color: var(--lake-box-background-color);
1201
1196
  }
1202
1197
  lake-box[name="file"] .lake-box-selected .lake-file {
1203
- background-color: var(--selection-background-color);
1198
+ background-color: var(--lake-selection-background-color);
1204
1199
  }
1205
1200
  lake-box[name="file"] .lake-box-focused .lake-file {
1206
- background-color: var(--selection-background-color);
1201
+ background-color: var(--lake-selection-background-color);
1207
1202
  }
1208
1203
  /* uploading status */
1209
1204
  .lake-file-uploading .lake-progress {
@@ -1224,10 +1219,10 @@ lake-box[name="file"] .lake-box-focused .lake-file {
1224
1219
  }
1225
1220
  /* error status */
1226
1221
  .lake-file-error .lake-file-type svg {
1227
- fill: var(--error-color);
1222
+ fill: var(--lake-error-color);
1228
1223
  }
1229
1224
  .lake-file-error .lake-file-name {
1230
- color: var(--error-color);
1225
+ color: var(--lake-error-color);
1231
1226
  }
1232
1227
 
1233
1228
  .lake-emoji {
@@ -1242,8 +1237,8 @@ lake-box[name="file"] .lake-box-focused .lake-file {
1242
1237
  height: 32px;
1243
1238
  }
1244
1239
  lake-box[name="emoji"] .lake-box-focused .lake-emoji {
1245
- border-color: var(--selection-background-color);
1246
- background-color: var(--selection-background-color);
1240
+ border-color: var(--lake-selection-background-color);
1241
+ background-color: var(--lake-selection-background-color);
1247
1242
  }
1248
1243
 
1249
1244
  .lake-equation {
@@ -1259,10 +1254,10 @@ lake-box[name="equation"] .lake-box-strip {
1259
1254
  align-self: center;
1260
1255
  }
1261
1256
  lake-box[name="equation"] .lake-box-selected .lake-equation {
1262
- background-color: var(--selection-background-color);
1257
+ background-color: var(--lake-selection-background-color);
1263
1258
  }
1264
1259
  lake-box[name="equation"] .lake-box-focused .lake-equation {
1265
- background-color: var(--selection-background-color);
1260
+ background-color: var(--lake-selection-background-color);
1266
1261
  }
1267
1262
  .lake-equation .lake-equation-view {
1268
1263
  padding: 0 6px;
@@ -1272,12 +1267,12 @@ lake-box[name="equation"] .lake-box-focused .lake-equation {
1272
1267
  top: 28px;
1273
1268
  left: 0;
1274
1269
  z-index: 1;
1275
- border: 1px solid var(--border-color);
1270
+ border: 1px solid var(--lake-border-color);
1276
1271
  border-radius: 5px;
1277
1272
  padding: 16px;
1278
1273
  width: fit-content;
1279
1274
  background-color: #fff;
1280
- box-shadow: var(--popup-shadow);
1275
+ box-shadow: var(--lake-popup-shadow);
1281
1276
  display: none;
1282
1277
  }
1283
1278
  lake-box[name="equation"] .lake-box-focused .lake-equation-form,
@@ -1288,7 +1283,7 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
1288
1283
  border: 0;
1289
1284
  font-family: Consolas, Courier, monospace;
1290
1285
  font-size: 14px;
1291
- color: var(--text-color);
1286
+ color: var(--lake-text-color);
1292
1287
  padding: 0;
1293
1288
  margin-right: 8px;
1294
1289
  width: 300px;
@@ -1309,8 +1304,8 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
1309
1304
  .lake-equation-error {
1310
1305
  padding: 0 6px;
1311
1306
  font-size: 14px;
1312
- color: var(--error-color);
1313
- background-color: var(--box-background-color);
1307
+ color: var(--lake-error-color);
1308
+ background-color: var(--lake-box-background-color);
1314
1309
  }
1315
1310
 
1316
1311
  .lake-mention {
@@ -1318,15 +1313,15 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
1318
1313
  border-radius: 2px;
1319
1314
  }
1320
1315
  .lake-container[data-readonly="false"] .lake-mention a:hover {
1321
- color: var(--link-color);
1316
+ color: var(--lake-link-color);
1322
1317
  text-decoration: none;
1323
1318
  }
1324
1319
  lake-box[name="mention"] .lake-box-focused .lake-mention {
1325
- border-color: var(--selection-background-color);
1326
- background-color: var(--selection-background-color);
1320
+ border-color: var(--lake-selection-background-color);
1321
+ background-color: var(--lake-selection-background-color);
1327
1322
  }
1328
1323
  .lake-mention-menu {
1329
- max-height: 180px;
1324
+ max-height: 208px;
1330
1325
  }
1331
1326
  .lake-mention-menu .lake-mention-avatar {
1332
1327
  margin-inline-end: 8px;
@@ -1340,7 +1335,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1340
1335
  .lake-mention-menu .lake-mention-nickname {
1341
1336
  margin-inline-end: 4px;
1342
1337
  font-weight: 500;
1343
- color: var(--text-color);
1338
+ color: var(--lake-text-color);
1344
1339
  white-space: nowrap;
1345
1340
  }
1346
1341
  .lake-mention-menu .lake-mention-name {
@@ -1348,7 +1343,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1348
1343
  }
1349
1344
 
1350
1345
  .lake-slash-menu {
1351
- max-height: 380px;
1346
+ max-height: 330px;
1352
1347
  }
1353
1348
  .lake-slash-menu .lake-menu-item input[type="file"] {
1354
1349
  display: none;
@@ -1356,8 +1351,9 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1356
1351
  .lake-slash-menu .lake-slash-icon {
1357
1352
  margin-inline-end: 8px;
1358
1353
  border-radius: 5px;
1359
- border: 1px solid var(--border-color);
1354
+ border: 1px solid var(--lake-border-color);
1360
1355
  background-color: #fff;
1356
+ line-height: 0;
1361
1357
  }
1362
1358
  .lake-slash-menu .lake-slash-icon svg,
1363
1359
  .lake-slash-menu .lake-slash-icon img {
@@ -1372,7 +1368,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1372
1368
  }
1373
1369
  .lake-slash-menu .lake-slash-title {
1374
1370
  font-weight: 500;
1375
- color: var(--text-color);
1371
+ color: var(--lake-text-color);
1376
1372
  }
1377
1373
  .lake-slash-menu .lake-slash-description {
1378
1374
  color: #8c8c8c;
@@ -1380,7 +1376,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1380
1376
 
1381
1377
  .lake-toolbar {
1382
1378
  box-sizing: border-box;
1383
- font-family: var(--font-family);
1379
+ font-family: var(--lake-font-family);
1384
1380
  font-size: 14px;
1385
1381
  font-weight: normal;
1386
1382
  line-height: normal;
@@ -1398,7 +1394,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1398
1394
  width: 1px;
1399
1395
  height: 20px;
1400
1396
  margin: 0 4px;
1401
- border-left: 1px solid var(--border-color);
1397
+ border-left: 1px solid var(--lake-border-color);
1402
1398
  user-select: none;
1403
1399
  }
1404
1400
  .lake-toolbar .lake-upload {