lakelib 0.2.2 → 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 +135 -137
  2. package/dist/lake.min.js +7 -7
  3. package/dist/lake.min.js.map +1 -1
  4. package/lib/lake.css +135 -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,40 +352,36 @@ 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
+ .lake-dropdown .lake-dropdown-menu,
364
365
  .lake-dropdown-menu {
365
- font-family: var(--font-family);
366
- font-size: 14px;
367
- font-weight: normal;
368
- line-height: normal;
369
- color: var(--text-color);
370
- user-select: none;
371
- box-sizing: content-box;
372
366
  position: absolute;
373
367
  top: 30px;
374
368
  left: 0;
375
- z-index: 1;
369
+ z-index: var(--lake-z-index-popup);
376
370
  list-style: none;
377
371
  margin: 0;
378
372
  padding: 6px 0;
379
- border: 1px solid var(--border-color);
373
+ border: 1px solid var(--lake-border-color);
380
374
  border-radius: 5px;
381
375
  background-color: #fff;
382
- box-shadow: var(--popup-shadow);
376
+ box-shadow: var(--lake-popup-shadow);
377
+ user-select: none;
383
378
  display: none;
384
379
  }
385
380
  .lake-dropdown-menu.lake-dropdown-menu-with-scroll {
386
381
  overflow-y: scroll;
387
382
  scrollbar-width: thin;
388
383
  }
384
+ .lake-dropdown .lake-dropdown-menu li,
389
385
  .lake-dropdown-menu li {
390
386
  display: flex;
391
387
  align-items: center;
@@ -397,10 +393,10 @@ button.lake-primary-button.lake-button-hovered {
397
393
  padding: 6px 24px 6px 10px;
398
394
  }
399
395
  .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
400
- background-color: var(--background-hover-color);
396
+ background-color: var(--lake-background-hover-color);
401
397
  }
402
398
  .lake-list-dropdown-menu li.lake-dropdown-item-selected {
403
- background-color: var(--background-active-color);
399
+ background-color: var(--lake-background-active-color);
404
400
  }
405
401
  .lake-list-dropdown-menu li .lake-dropdown-menu-check {
406
402
  line-height: 0;
@@ -432,10 +428,10 @@ button.lake-primary-button.lake-button-hovered {
432
428
  border-radius: 2px;
433
429
  }
434
430
  .lake-icon-dropdown-menu li.lake-dropdown-item-hovered {
435
- background-color: var(--background-hover-color);
431
+ background-color: var(--lake-background-hover-color);
436
432
  }
437
433
  .lake-icon-dropdown-menu li.lake-dropdown-item-selected {
438
- background-color: var(--background-active-color);
434
+ background-color: var(--lake-background-active-color);
439
435
  }
440
436
  .lake-icon-dropdown-menu li .lake-dropdown-menu-check {
441
437
  display: none;
@@ -462,10 +458,10 @@ button.lake-primary-button.lake-button-hovered {
462
458
  border-radius: 2px;
463
459
  }
464
460
  .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
465
- background-color: var(--background-hover-color);
461
+ background-color: var(--lake-background-hover-color);
466
462
  }
467
463
  .lake-character-dropdown-menu li.lake-dropdown-item-selected {
468
- background-color: var(--background-active-color);
464
+ background-color: var(--lake-background-active-color);
469
465
  }
470
466
  .lake-character-dropdown-menu li .lake-dropdown-menu-check {
471
467
  display: none;
@@ -490,10 +486,10 @@ button.lake-primary-button.lake-button-hovered {
490
486
  padding: 0;
491
487
  }
492
488
  .lake-color-dropdown-menu li.lake-dropdown-item-hovered {
493
- background-color: var(--background-hover-color);
489
+ background-color: var(--lake-background-hover-color);
494
490
  }
495
491
  .lake-color-dropdown-menu li.lake-dropdown-item-selected {
496
- background-color: var(--background-active-color);
492
+ background-color: var(--lake-background-active-color);
497
493
  }
498
494
  .lake-color-dropdown-menu li .lake-dropdown-menu-check {
499
495
  position: absolute;
@@ -523,7 +519,7 @@ button.lake-primary-button.lake-button-hovered {
523
519
  .lake-color-dropdown-menu li .lake-dropdown-menu-text {
524
520
  font-size: 0;
525
521
  box-sizing: content-box;
526
- border: 1px solid var(--background-hover-color);
522
+ border: 1px solid var(--lake-background-hover-color);
527
523
  border-radius: 2px;
528
524
  width: 16px;
529
525
  height: 16px;
@@ -546,11 +542,12 @@ button.lake-primary-button.lake-button-hovered {
546
542
  }
547
543
 
548
544
  .lake-popup {
549
- font-family: var(--font-family);
545
+ box-sizing: border-box;
546
+ font-family: var(--lake-font-family);
550
547
  font-size: 14px;
551
548
  font-weight: normal;
552
549
  line-height: normal;
553
- color: var(--text-color);
550
+ color: var(--lake-text-color);
554
551
  }
555
552
  .lake-popup *,
556
553
  .lake-popup ::before,
@@ -558,21 +555,21 @@ button.lake-primary-button.lake-button-hovered {
558
555
  box-sizing: border-box;
559
556
  }
560
557
  .lake-popup button {
561
- box-shadow: var(--button-shadow);
558
+ box-shadow: var(--lake-button-shadow);
562
559
  }
563
560
  .lake-popup input[type="text"] {
564
- font-family: var(--font-family);
561
+ font-family: var(--lake-font-family);
565
562
  font-size: 14px;
566
- color: var(--text-color);
563
+ color: var(--lake-text-color);
567
564
  border-radius: 5px;
568
- border: 1px solid var(--input-border-color);
565
+ border: 1px solid var(--lake-input-border-color);
569
566
  padding: 4px 10px;
570
567
  }
571
568
  .lake-popup input[type="text"]:hover {
572
- border: 1px solid var(--input-border-hover-color);
569
+ border: 1px solid var(--lake-input-border-hover-color);
573
570
  }
574
571
  .lake-popup input[type="text"]:focus-visible {
575
- outline: var(--input-outline);
572
+ outline: var(--lake-input-outline);
576
573
  outline-offset: -2px;
577
574
  }
578
575
  .lake-popup .lake-row {
@@ -583,15 +580,15 @@ button.lake-primary-button.lake-button-hovered {
583
580
  position: absolute;
584
581
  top: 0;
585
582
  left: 0;
586
- z-index: 1;
583
+ z-index: var(--lake-z-index-popup);
587
584
  list-style: none;
588
- border: 1px solid var(--border-color);
585
+ border: 1px solid var(--lake-border-color);
589
586
  border-radius: 5px;
590
587
  margin: 0;
591
588
  padding: 4px 8px;
592
589
  width: fit-content;
593
590
  background-color: #fff;
594
- box-shadow: var(--popup-shadow);
591
+ box-shadow: var(--lake-popup-shadow);
595
592
  display: none;
596
593
  max-height: 180px;
597
594
  overflow-y: scroll;
@@ -608,7 +605,7 @@ button.lake-primary-button.lake-button-hovered {
608
605
  scroll-margin: 4px 0;
609
606
  }
610
607
  .lake-menu .lake-menu-item-selected {
611
- background-color: var(--background-active-color);
608
+ background-color: var(--lake-background-active-color);
612
609
  }
613
610
 
614
611
  .lake-resizer {
@@ -626,7 +623,7 @@ button.lake-primary-button.lake-button-hovered {
626
623
  z-index: 1;
627
624
  border: 1px solid #fff;
628
625
  border-radius: 6px;
629
- background-color: var(--box-border-focus-color);
626
+ background-color: var(--lake-box-border-focus-color);
630
627
  }
631
628
  .lake-resizer-top-left {
632
629
  top: -5px;
@@ -706,24 +703,24 @@ button.lake-primary-button.lake-button-hovered {
706
703
  }
707
704
 
708
705
  .lake-container a {
709
- color: var(--link-color);
706
+ color: var(--lake-link-color);
710
707
  text-decoration: none;
711
708
  }
712
709
  .lake-container a:hover {
713
- color: var(--link-hover-color);
710
+ color: var(--lake-link-hover-color);
714
711
  text-decoration: underline;
715
712
  }
716
713
  .lake-link-popup {
717
714
  position: absolute;
718
715
  top: 0;
719
716
  left: 0;
720
- z-index: 1;
721
- border: 1px solid var(--border-color);
717
+ z-index: var(--lake-z-index-popup);
718
+ border: 1px solid var(--lake-border-color);
722
719
  border-radius: 5px;
723
720
  padding: 16px;
724
721
  width: fit-content;
725
722
  background-color: #fff;
726
- box-shadow: var(--popup-shadow);
723
+ box-shadow: var(--lake-popup-shadow);
727
724
  display: none;
728
725
  }
729
726
  .lake-link-popup .lake-url-row {
@@ -745,11 +742,11 @@ button.lake-primary-button.lake-button-hovered {
745
742
  }
746
743
  .lake-link-popup button[name="copy"] svg:nth-child(2) {
747
744
  display: none;
748
- fill: var(--success-color);
745
+ fill: var(--lake-success-color);
749
746
  }
750
747
  .lake-link-popup button[name="copy"] svg:last-child {
751
748
  display: none;
752
- fill: var(--error-color);
749
+ fill: var(--lake-error-color);
753
750
  }
754
751
 
755
752
  .lake-container ol,
@@ -857,7 +854,7 @@ button.lake-primary-button.lake-button-hovered {
857
854
  background-color: #1890ff;
858
855
  }
859
856
  .lake-container ul[type="checklist"] li[value="false"]::before {
860
- border: 1px solid var(--border-color);
857
+ border: 1px solid var(--lake-border-color);
861
858
  background-color: #fff;
862
859
  }
863
860
  .lake-container ul[type="checklist"] li::after {
@@ -886,13 +883,13 @@ button.lake-primary-button.lake-button-hovered {
886
883
  margin: 0;
887
884
  margin-bottom: 8px;
888
885
  padding: 8px 12px;
889
- color: var(--secondary-text-color);
886
+ color: var(--lake-secondary-text-color);
890
887
  border-left: 4px solid #0505050f;
891
888
  }
892
889
  .lake-container blockquote[type] {
893
890
  margin: 16px 0;
894
891
  padding: 16px 20px;
895
- color: var(--text-color);
892
+ color: var(--lake-text-color);
896
893
  border: 1px solid transparent;
897
894
  border-radius: 8px;
898
895
  }
@@ -918,7 +915,7 @@ button.lake-primary-button.lake-button-hovered {
918
915
  }
919
916
  .lake-container table td {
920
917
  padding: 8px 16px;
921
- border: 1px solid var(--border-color);
918
+ border: 1px solid var(--lake-border-color);
922
919
  }
923
920
 
924
921
  lake-box[name="hr"] {
@@ -936,25 +933,25 @@ lake-box[name="hr"] {
936
933
  cursor: default;
937
934
  }
938
935
  .lake-container[contenteditable="true"] lake-box[name="hr"] .lake-box-hovered .lake-hr {
939
- background-color: var(--box-background-color);
936
+ background-color: var(--lake-box-background-color);
940
937
  }
941
938
  lake-box[name="hr"] .lake-box-selected .lake-hr,
942
939
  lake-box[name="hr"] .lake-box-focused .lake-hr {
943
- background-color: var(--selection-background-color);
940
+ background-color: var(--lake-selection-background-color);
944
941
  }
945
942
  .lake-hr hr {
946
943
  width: 100%;
947
944
  margin: 0;
948
945
  padding: 0;
949
946
  border: 0;
950
- border-top: 1px solid var(--border-color);
947
+ border-top: 1px solid var(--lake-border-color);
951
948
  }
952
949
 
953
950
  /* CodeMirror */
954
951
  .cm-editor {
955
952
  font-size: 14px;
956
953
  border-radius: 5px;
957
- background-color: var(--box-background-color);
954
+ background-color: var(--lake-box-background-color);
958
955
  }
959
956
  .cm-editor.cm-focused {
960
957
  outline: none;
@@ -970,7 +967,7 @@ lake-box[name="codeBlock"] {
970
967
  }
971
968
  lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
972
969
  lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
973
- border-color: var(--box-border-color);
970
+ border-color: var(--lake-box-border-color);
974
971
  }
975
972
  .lake-code-block {
976
973
  position: relative;
@@ -990,10 +987,10 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
990
987
  .lake-code-block .lake-dropdown .lake-dropdown-title {
991
988
  margin: 0;
992
989
  padding-right: 4px;
993
- background-color: var(--box-background-color);
990
+ background-color: var(--lake-box-background-color);
994
991
  }
995
992
  .lake-code-block .lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
996
- background-color: var(--background-active-color);
993
+ background-color: var(--lake-background-active-color);
997
994
  }
998
995
  .lake-code-block .lake-dropdown .lake-dropdown-text {
999
996
  margin: 3px 6px;
@@ -1008,9 +1005,9 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
1008
1005
  }
1009
1006
  .lake-code-block-error {
1010
1007
  font-size: 14px;
1011
- color: var(--error-color);
1008
+ color: var(--lake-error-color);
1012
1009
  border-radius: 5px;
1013
- background-color: var(--box-background-color);
1010
+ background-color: var(--lake-box-background-color);
1014
1011
  padding: 16px 20px;
1015
1012
  }
1016
1013
 
@@ -1044,7 +1041,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
1044
1041
  height: 100%;
1045
1042
  }
1046
1043
  lake-box[name="image"] .lake-box-focused .lake-image {
1047
- border-color: var(--box-border-focus-color);
1044
+ border-color: var(--lake-box-border-focus-color);
1048
1045
  }
1049
1046
  /* uploading status */
1050
1047
  .lake-image-uploading .lake-image-img {
@@ -1080,13 +1077,13 @@ lake-box[name="image"] .lake-box-focused .lake-image {
1080
1077
  padding: 16px;
1081
1078
  }
1082
1079
  .lake-image.lake-image-error {
1083
- border: 1px solid var(--box-border-color);
1080
+ border: 1px solid var(--lake-box-border-color);
1084
1081
  }
1085
1082
  .lake-image.lake-image-error ::selection {
1086
1083
  background-color: transparent;
1087
1084
  }
1088
1085
  lake-box[name="image"] .lake-box-selected .lake-image-error {
1089
- background-color: var(--selection-background-color);
1086
+ background-color: var(--lake-selection-background-color);
1090
1087
  }
1091
1088
  .lake-image .lake-error-icon {
1092
1089
  line-height: 0;
@@ -1094,12 +1091,12 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
1094
1091
  margin-bottom: 8px;
1095
1092
  }
1096
1093
  .lake-image .lake-error-icon svg {
1097
- fill: var(--error-color);
1094
+ fill: var(--lake-error-color);
1098
1095
  width: 64px;
1099
1096
  height: 64px;
1100
1097
  }
1101
1098
  .lake-image .lake-error-name {
1102
- color: var(--error-color);
1099
+ color: var(--lake-error-color);
1103
1100
  line-height: normal;
1104
1101
  }
1105
1102
  /* full screen */
@@ -1127,23 +1124,23 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
1127
1124
  .lake-video .lake-video-form {
1128
1125
  padding: 16px;
1129
1126
  line-height: normal;
1130
- border: 1px solid var(--box-border-color);
1127
+ border: 1px solid var(--lake-box-border-color);
1131
1128
  border-radius: 4px;
1132
1129
  }
1133
1130
  .lake-video input[type="text"] {
1134
- font-family: var(--font-family);
1131
+ font-family: var(--lake-font-family);
1135
1132
  font-size: 14px;
1136
- color: var(--text-color);
1133
+ color: var(--lake-text-color);
1137
1134
  border-radius: 5px;
1138
- border: 1px solid var(--input-border-color);
1135
+ border: 1px solid var(--lake-input-border-color);
1139
1136
  padding: 4px 10px;
1140
1137
  width: 100%;
1141
1138
  }
1142
1139
  .lake-video input[type="text"]:hover {
1143
- border: 1px solid var(--input-border-hover-color);
1140
+ border: 1px solid var(--lake-input-border-hover-color);
1144
1141
  }
1145
1142
  .lake-video input[type="text"]:focus-visible {
1146
- outline: var(--input-outline);
1143
+ outline: var(--lake-input-outline);
1147
1144
  outline-offset: -2px;
1148
1145
  }
1149
1146
  .lake-video .lake-row {
@@ -1152,7 +1149,7 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
1152
1149
  .lake-video .lake-desc-row {
1153
1150
  padding-top: 8px;
1154
1151
  padding-bottom: 16px;
1155
- color: var(--secondary-text-color);
1152
+ color: var(--lake-secondary-text-color);
1156
1153
  }
1157
1154
  .lake-video .lake-button-row {
1158
1155
  padding-top: 16px;
@@ -1192,16 +1189,16 @@ lake-box[name="file"] .lake-box-strip {
1192
1189
  .lake-file .lake-file-name {
1193
1190
  line-height: 24px;
1194
1191
  margin-right: 6px;
1195
- color: var(--link-color);
1192
+ color: var(--lake-link-color);
1196
1193
  }
1197
1194
  lake-box[name="file"] .lake-box-hovered .lake-file {
1198
- background-color: var(--box-background-color);
1195
+ background-color: var(--lake-box-background-color);
1199
1196
  }
1200
1197
  lake-box[name="file"] .lake-box-selected .lake-file {
1201
- background-color: var(--selection-background-color);
1198
+ background-color: var(--lake-selection-background-color);
1202
1199
  }
1203
1200
  lake-box[name="file"] .lake-box-focused .lake-file {
1204
- background-color: var(--selection-background-color);
1201
+ background-color: var(--lake-selection-background-color);
1205
1202
  }
1206
1203
  /* uploading status */
1207
1204
  .lake-file-uploading .lake-progress {
@@ -1222,10 +1219,10 @@ lake-box[name="file"] .lake-box-focused .lake-file {
1222
1219
  }
1223
1220
  /* error status */
1224
1221
  .lake-file-error .lake-file-type svg {
1225
- fill: var(--error-color);
1222
+ fill: var(--lake-error-color);
1226
1223
  }
1227
1224
  .lake-file-error .lake-file-name {
1228
- color: var(--error-color);
1225
+ color: var(--lake-error-color);
1229
1226
  }
1230
1227
 
1231
1228
  .lake-emoji {
@@ -1240,8 +1237,8 @@ lake-box[name="file"] .lake-box-focused .lake-file {
1240
1237
  height: 32px;
1241
1238
  }
1242
1239
  lake-box[name="emoji"] .lake-box-focused .lake-emoji {
1243
- border-color: var(--selection-background-color);
1244
- background-color: var(--selection-background-color);
1240
+ border-color: var(--lake-selection-background-color);
1241
+ background-color: var(--lake-selection-background-color);
1245
1242
  }
1246
1243
 
1247
1244
  .lake-equation {
@@ -1257,10 +1254,10 @@ lake-box[name="equation"] .lake-box-strip {
1257
1254
  align-self: center;
1258
1255
  }
1259
1256
  lake-box[name="equation"] .lake-box-selected .lake-equation {
1260
- background-color: var(--selection-background-color);
1257
+ background-color: var(--lake-selection-background-color);
1261
1258
  }
1262
1259
  lake-box[name="equation"] .lake-box-focused .lake-equation {
1263
- background-color: var(--selection-background-color);
1260
+ background-color: var(--lake-selection-background-color);
1264
1261
  }
1265
1262
  .lake-equation .lake-equation-view {
1266
1263
  padding: 0 6px;
@@ -1270,12 +1267,12 @@ lake-box[name="equation"] .lake-box-focused .lake-equation {
1270
1267
  top: 28px;
1271
1268
  left: 0;
1272
1269
  z-index: 1;
1273
- border: 1px solid var(--border-color);
1270
+ border: 1px solid var(--lake-border-color);
1274
1271
  border-radius: 5px;
1275
1272
  padding: 16px;
1276
1273
  width: fit-content;
1277
1274
  background-color: #fff;
1278
- box-shadow: var(--popup-shadow);
1275
+ box-shadow: var(--lake-popup-shadow);
1279
1276
  display: none;
1280
1277
  }
1281
1278
  lake-box[name="equation"] .lake-box-focused .lake-equation-form,
@@ -1286,7 +1283,7 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
1286
1283
  border: 0;
1287
1284
  font-family: Consolas, Courier, monospace;
1288
1285
  font-size: 14px;
1289
- color: var(--text-color);
1286
+ color: var(--lake-text-color);
1290
1287
  padding: 0;
1291
1288
  margin-right: 8px;
1292
1289
  width: 300px;
@@ -1307,8 +1304,8 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
1307
1304
  .lake-equation-error {
1308
1305
  padding: 0 6px;
1309
1306
  font-size: 14px;
1310
- color: var(--error-color);
1311
- background-color: var(--box-background-color);
1307
+ color: var(--lake-error-color);
1308
+ background-color: var(--lake-box-background-color);
1312
1309
  }
1313
1310
 
1314
1311
  .lake-mention {
@@ -1316,15 +1313,15 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
1316
1313
  border-radius: 2px;
1317
1314
  }
1318
1315
  .lake-container[data-readonly="false"] .lake-mention a:hover {
1319
- color: var(--link-color);
1316
+ color: var(--lake-link-color);
1320
1317
  text-decoration: none;
1321
1318
  }
1322
1319
  lake-box[name="mention"] .lake-box-focused .lake-mention {
1323
- border-color: var(--selection-background-color);
1324
- background-color: var(--selection-background-color);
1320
+ border-color: var(--lake-selection-background-color);
1321
+ background-color: var(--lake-selection-background-color);
1325
1322
  }
1326
1323
  .lake-mention-menu {
1327
- max-height: 180px;
1324
+ max-height: 208px;
1328
1325
  }
1329
1326
  .lake-mention-menu .lake-mention-avatar {
1330
1327
  margin-inline-end: 8px;
@@ -1338,7 +1335,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1338
1335
  .lake-mention-menu .lake-mention-nickname {
1339
1336
  margin-inline-end: 4px;
1340
1337
  font-weight: 500;
1341
- color: var(--text-color);
1338
+ color: var(--lake-text-color);
1342
1339
  white-space: nowrap;
1343
1340
  }
1344
1341
  .lake-mention-menu .lake-mention-name {
@@ -1346,7 +1343,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1346
1343
  }
1347
1344
 
1348
1345
  .lake-slash-menu {
1349
- max-height: 380px;
1346
+ max-height: 330px;
1350
1347
  }
1351
1348
  .lake-slash-menu .lake-menu-item input[type="file"] {
1352
1349
  display: none;
@@ -1354,8 +1351,9 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1354
1351
  .lake-slash-menu .lake-slash-icon {
1355
1352
  margin-inline-end: 8px;
1356
1353
  border-radius: 5px;
1357
- border: 1px solid var(--border-color);
1354
+ border: 1px solid var(--lake-border-color);
1358
1355
  background-color: #fff;
1356
+ line-height: 0;
1359
1357
  }
1360
1358
  .lake-slash-menu .lake-slash-icon svg,
1361
1359
  .lake-slash-menu .lake-slash-icon img {
@@ -1370,7 +1368,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1370
1368
  }
1371
1369
  .lake-slash-menu .lake-slash-title {
1372
1370
  font-weight: 500;
1373
- color: var(--text-color);
1371
+ color: var(--lake-text-color);
1374
1372
  }
1375
1373
  .lake-slash-menu .lake-slash-description {
1376
1374
  color: #8c8c8c;
@@ -1378,7 +1376,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1378
1376
 
1379
1377
  .lake-toolbar {
1380
1378
  box-sizing: border-box;
1381
- font-family: var(--font-family);
1379
+ font-family: var(--lake-font-family);
1382
1380
  font-size: 14px;
1383
1381
  font-weight: normal;
1384
1382
  line-height: normal;
@@ -1396,7 +1394,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1396
1394
  width: 1px;
1397
1395
  height: 20px;
1398
1396
  margin: 0 4px;
1399
- border-left: 1px solid var(--border-color);
1397
+ border-left: 1px solid var(--lake-border-color);
1400
1398
  user-select: none;
1401
1399
  }
1402
1400
  .lake-toolbar .lake-upload {