lakelib 0.2.3 → 0.2.5

package/lib/lake.css

@@ -1,35 +1,37 @@
-.lake-custom-properties {
+:root {
   /* common */
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  --text-color: #000000e0;
-  --secondary-text-color: #000000a6;
-  --disabled-text-color: #00000040;
-  --border-color: #d9d9d9;
-  --background-color: #0000000a;
-  --background-hover-color: #0000000a;
-  --background-active-color: #0000000d;
-  --success-color: #52c41a;
-  --warning-color: #faad14;
-  --error-color: #ff4d4f;
+  --lake-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --lake-font-size: 16px;
+  --lake-text-color: #000000e0;
+  --lake-secondary-text-color: #000000a6;
+  --lake-border-color: #d9d9d9;
+  --lake-background-hover-color: #0000000a;
+  --lake-background-active-color: #0000000d;
+  --lake-success-color: #52c41a;
+  --lake-warning-color: #faad14;
+  --lake-error-color: #ff4d4f;
   /* selection */
-  --selection-background-color: #1ba2e333;
+  --lake-selection-background-color: #1ba2e333;
   /* link */
-  --link-color: #1677ff;
-  --link-hover-color: #69b1ff;
+  --lake-link-color: #1677ff;
+  --lake-link-hover-color: #69b1ff;
   /* box */
-  --box-border-color: #d9d9d9;
-  --box-border-focus-color: #1677ff;
-  --box-border-active-color: #faad14;
-  --box-background-color: #f6f8fa;
-  /* button */
-  --button-shadow: 0 2px 0 #00000005;
-  --button-outline: 2px solid #69b1ff;
+  --lake-box-border-color: #d9d9d9;
+  --lake-box-border-focus-color: #1677ff;
+  --lake-box-background-color: #f6f8fa;
   /* popup */
-  --popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
-  /* input form */
-  --input-border-color: #d9d9d9;
-  --input-border-hover-color: #69b1ff;
-  --input-outline: 2px solid #69b1ff;
+  --lake-popup-z-index: 822;
+  --lake-popup-font-size: 14px;
+  --lake-popup-border-color: #d9d9d9;
+  --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
+  /* button */
+  --lake-button-font-size: 14px;
+  --lake-button-shadow: 0 2px 0 #00000005;
+  --lake-button-outline: 2px solid #69b1ff;
+  /* input element, text field */
+  --lake-input-border-color: #d9d9d9;
+  --lake-input-border-hover-color: #69b1ff;
+  --lake-input-outline: 2px solid #69b1ff;
 }
 
 @keyframes lakerotate {
@@ -46,8 +48,8 @@
 }
 .lake-container {
   box-sizing: border-box;
-  font-family: var(--font-family);
-  font-size: 16px;
+  font-family: var(--lake-font-family);
+  font-size: var(--lake-font-size);
   font-weight: normal;
   line-height: 1.45;
   padding: 16px 24px;
@@ -58,7 +60,7 @@
 .lake-container::selection,
 .lake-container ::selection {
   color: inherit;
-  background: var(--selection-background-color);
+  background: var(--lake-selection-background-color);
 }
 .lake-container *,
 .lake-container ::before,
@@ -69,7 +71,7 @@
   position: absolute;
   top: 8px;
   left: 12px;
-  color: var(--secondary-text-color);
+  color: var(--lake-secondary-text-color);
   content: attr(placeholder);
   pointer-events: none;
 }
@@ -181,7 +183,7 @@ lake-box .lake-button-group {
 lake-box .lake-button-group button {
   border-radius: 5px;
   border: 0;
-  color: var(--text-color);
+  color: var(--lake-text-color);
   background-color: transparent;
   padding: 0;
   margin: 0;
@@ -195,35 +197,13 @@ lake-box .lake-button-group button svg {
   height: 16px;
   margin: 6px;
 }
-/* box toolbar */
-.lake-box-toolbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  border: 1px solid var(--border-color);
-  border-radius: 5px;
-  background-color: #fff;
-  box-shadow: 0 2px 0 #00000005;
-  padding: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.lake-box-toolbar .lake-toolbar-divider {
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  border-left: 1px solid var(--border-color);
-  user-select: none;
-}
 
 button.lake-button {
   border-radius: 5px;
   border: 0;
   font-family: Arial;
-  font-size: 14px;
-  color: var(--text-color);
+  font-size: var(--lake-button-font-size);
+  color: var(--lake-text-color);
   background-color: #fff;
   padding: 0;
   margin: 0 1px;
@@ -233,7 +213,7 @@ button.lake-button {
   user-select: none;
 }
 button.lake-button:focus-visible {
-  outline: var(--button-outline);
+  outline: var(--lake-button-outline);
 }
 button.lake-button[disabled] {
   opacity: 0.25;
@@ -247,22 +227,22 @@ button.lake-button img {
   margin: 6px;
 }
 button.lake-icon-button.lake-button-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 button.lake-icon-button.lake-button-selected {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 button.lake-text-button {
   background-color: transparent;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--lake-border-color);
   padding: 8px 16px;
   line-height: normal;
 }
 button.lake-text-button.lake-button-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 button.lake-text-button.lake-button-selected {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 button.lake-text-button svg {
   background-color: transparent;
@@ -285,17 +265,17 @@ button.lake-primary-button.lake-button-hovered {
 
 .lake-dropdown {
   position: relative;
-  font-family: var(--font-family);
-  color: var(--text-color);
-  font-size: 14px;
+  font-family: var(--lake-font-family);
+  color: var(--lake-text-color);
+  font-size: var(--lake-button-font-size);
   user-select: none;
 }
 .lake-dropdown button.lake-dropdown-title {
   border-radius: 5px;
   border: 0;
   font-family: Arial;
-  font-size: 14px;
-  color: var(--text-color);
+  font-size: var(--lake-button-font-size);
+  color: var(--lake-text-color);
   background-color: #fff;
   padding: 0;
   display: flex;
@@ -311,7 +291,7 @@ button.lake-primary-button.lake-button-hovered {
 .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered,
 .lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered,
 .lake-dropdown.lake-character-dropdown button.lake-dropdown-title-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 .lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
   margin-right: 0;
@@ -322,7 +302,7 @@ button.lake-primary-button.lake-button-hovered {
   margin: 6px;
   overflow: hidden;
   white-space: nowrap;
-  color: var(--text-color);
+  color: var(--lake-text-color);
 }
 .lake-dropdown .lake-dropdown-icon {
   position: relative;
@@ -330,7 +310,7 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 5px 0 0 5px;
 }
 .lake-dropdown .lake-dropdown-icon-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 .lake-dropdown .lake-dropdown-icon svg,
 .lake-dropdown .lake-dropdown-icon img {
@@ -352,35 +332,29 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 0 5px 5px 0;
 }
 .lake-dropdown .lake-dropdown-down-icon-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 .lake-dropdown .lake-dropdown-down-icon svg {
   width: 12px;
   height: 12px;
   margin: 8px 2px;
-  fill: var(--secondary-text-color);
+  fill: var(--lake-secondary-text-color);
 }
 /* menu */
 .lake-dropdown .lake-dropdown-menu,
 .lake-dropdown-menu {
-  font-family: var(--font-family);
-  font-size: 14px;
-  font-weight: normal;
-  line-height: normal;
-  color: var(--text-color);
-  user-select: none;
-  box-sizing: content-box;
   position: absolute;
   top: 30px;
   left: 0;
-  z-index: 1;
+  z-index: var(--lake-popup-z-index);
   list-style: none;
   margin: 0;
   padding: 6px 0;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   background-color: #fff;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--lake-popup-shadow);
+  user-select: none;
   display: none;
 }
 .lake-dropdown-menu.lake-dropdown-menu-with-scroll {
@@ -399,10 +373,10 @@ button.lake-primary-button.lake-button-hovered {
   padding: 6px 24px 6px 10px;
 }
 .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 .lake-list-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 .lake-list-dropdown-menu li .lake-dropdown-menu-check {
   line-height: 0;
@@ -434,10 +408,10 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 2px;
 }
 .lake-icon-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 .lake-icon-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 .lake-icon-dropdown-menu li .lake-dropdown-menu-check {
   display: none;
@@ -464,10 +438,10 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 2px;
 }
 .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 .lake-character-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 .lake-character-dropdown-menu li .lake-dropdown-menu-check {
   display: none;
@@ -492,10 +466,10 @@ button.lake-primary-button.lake-button-hovered {
   padding: 0;
 }
 .lake-color-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--background-hover-color);
+  background-color: var(--lake-background-hover-color);
 }
 .lake-color-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 .lake-color-dropdown-menu li .lake-dropdown-menu-check {
   position: absolute;
@@ -525,7 +499,7 @@ button.lake-primary-button.lake-button-hovered {
 .lake-color-dropdown-menu li .lake-dropdown-menu-text {
   font-size: 0;
   box-sizing: content-box;
-  border: 1px solid var(--background-hover-color);
+  border: 1px solid var(--lake-background-hover-color);
   border-radius: 2px;
   width: 16px;
   height: 16px;
@@ -542,39 +516,40 @@ button.lake-primary-button.lake-button-hovered {
 }
 .lake-color-dropdown-menu li:first-child .lake-dropdown-menu-text {
   width: 100%;
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   border: 1px solid transparent;
   height: auto;
 }
 
 .lake-popup {
-  font-family: var(--font-family);
-  font-size: 14px;
+  box-sizing: border-box;
+  font-family: var(--lake-font-family);
+  font-size: var(--lake-popup-font-size);
   font-weight: normal;
   line-height: normal;
-  color: var(--text-color);
+  color: var(--lake-text-color);
 }
 .lake-popup *,
 .lake-popup ::before,
 .lake-popup ::after {
   box-sizing: border-box;
 }
-.lake-popup button {
-  box-shadow: var(--button-shadow);
+.lake-popup .lake-text-button {
+  box-shadow: var(--lake-button-shadow);
 }
 .lake-popup input[type="text"] {
-  font-family: var(--font-family);
-  font-size: 14px;
-  color: var(--text-color);
+  font-family: var(--lake-font-family);
+  font-size: var(--lake-popup-font-size);
+  color: var(--lake-text-color);
   border-radius: 5px;
-  border: 1px solid var(--input-border-color);
+  border: 1px solid var(--lake-input-border-color);
   padding: 4px 10px;
 }
 .lake-popup input[type="text"]:hover {
-  border: 1px solid var(--input-border-hover-color);
+  border: 1px solid var(--lake-input-border-hover-color);
 }
 .lake-popup input[type="text"]:focus-visible {
-  outline: var(--input-outline);
+  outline: var(--lake-input-outline);
   outline-offset: -2px;
 }
 .lake-popup .lake-row {
@@ -585,15 +560,15 @@ button.lake-primary-button.lake-button-hovered {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: var(--lake-popup-z-index);
   list-style: none;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   margin: 0;
   padding: 4px 8px;
   width: fit-content;
   background-color: #fff;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--lake-popup-shadow);
   display: none;
   max-height: 180px;
   overflow-y: scroll;
@@ -610,7 +585,7 @@ button.lake-primary-button.lake-button-hovered {
   scroll-margin: 4px 0;
 }
 .lake-menu .lake-menu-item-selected {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 
 .lake-resizer {
@@ -628,7 +603,7 @@ button.lake-primary-button.lake-button-hovered {
   z-index: 1;
   border: 1px solid #fff;
   border-radius: 6px;
-  background-color: var(--box-border-focus-color);
+  background-color: var(--lake-box-border-focus-color);
 }
 .lake-resizer-top-left {
   top: -5px;
@@ -708,24 +683,24 @@ button.lake-primary-button.lake-button-hovered {
 }
 
 .lake-container a {
-  color: var(--link-color);
+  color: var(--lake-link-color);
   text-decoration: none;
 }
 .lake-container a:hover {
-  color: var(--link-hover-color);
+  color: var(--lake-link-hover-color);
   text-decoration: underline;
 }
 .lake-link-popup {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1;
-  border: 1px solid var(--border-color);
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   padding: 16px;
   width: fit-content;
   background-color: #fff;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--lake-popup-shadow);
   display: none;
 }
 .lake-link-popup .lake-url-row {
@@ -747,11 +722,11 @@ button.lake-primary-button.lake-button-hovered {
 }
 .lake-link-popup button[name="copy"] svg:nth-child(2) {
   display: none;
-  fill: var(--success-color);
+  fill: var(--lake-success-color);
 }
 .lake-link-popup button[name="copy"] svg:last-child {
   display: none;
-  fill: var(--error-color);
+  fill: var(--lake-error-color);
 }
 
 .lake-container ol,
@@ -859,7 +834,7 @@ button.lake-primary-button.lake-button-hovered {
   background-color: #1890ff;
 }
 .lake-container ul[type="checklist"] li[value="false"]::before {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--lake-border-color);
   background-color: #fff;
 }
 .lake-container ul[type="checklist"] li::after {
@@ -888,13 +863,13 @@ button.lake-primary-button.lake-button-hovered {
   margin: 0;
   margin-bottom: 8px;
   padding: 8px 12px;
-  color: var(--secondary-text-color);
+  color: var(--lake-secondary-text-color);
   border-left: 4px solid #0505050f;
 }
 .lake-container blockquote[type] {
   margin: 16px 0;
   padding: 16px 20px;
-  color: var(--text-color);
+  color: var(--lake-text-color);
   border: 1px solid transparent;
   border-radius: 8px;
 }
@@ -920,7 +895,7 @@ button.lake-primary-button.lake-button-hovered {
 }
 .lake-container table td {
   padding: 8px 16px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--lake-border-color);
 }
 
 lake-box[name="hr"] {
@@ -938,25 +913,25 @@ lake-box[name="hr"] {
   cursor: default;
 }
 .lake-container[contenteditable="true"] lake-box[name="hr"] .lake-box-hovered .lake-hr {
-  background-color: var(--box-background-color);
+  background-color: var(--lake-box-background-color);
 }
 lake-box[name="hr"] .lake-box-selected .lake-hr,
 lake-box[name="hr"] .lake-box-focused .lake-hr {
-  background-color: var(--selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 .lake-hr hr {
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--lake-border-color);
 }
 
 /* CodeMirror */
 .cm-editor {
   font-size: 14px;
   border-radius: 5px;
-  background-color: var(--box-background-color);
+  background-color: var(--lake-box-background-color);
 }
 .cm-editor.cm-focused {
   outline: none;
@@ -972,7 +947,7 @@ lake-box[name="codeBlock"] {
 }
 lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
 lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
-  border-color: var(--box-border-color);
+  border-color: var(--lake-box-border-color);
 }
 .lake-code-block {
   position: relative;
@@ -992,10 +967,10 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 .lake-code-block .lake-dropdown .lake-dropdown-title {
   margin: 0;
   padding-right: 4px;
-  background-color: var(--box-background-color);
+  background-color: var(--lake-box-background-color);
 }
 .lake-code-block .lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
-  background-color: var(--background-active-color);
+  background-color: var(--lake-background-active-color);
 }
 .lake-code-block .lake-dropdown .lake-dropdown-text {
   margin: 3px 6px;
@@ -1010,9 +985,9 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 }
 .lake-code-block-error {
   font-size: 14px;
-  color: var(--error-color);
+  color: var(--lake-error-color);
   border-radius: 5px;
-  background-color: var(--box-background-color);
+  background-color: var(--lake-box-background-color);
   padding: 16px 20px;
 }
 
@@ -1046,7 +1021,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   height: 100%;
 }
 lake-box[name="image"] .lake-box-focused .lake-image {
-  border-color: var(--box-border-focus-color);
+  border-color: var(--lake-box-border-focus-color);
 }
 /* uploading status */
 .lake-image-uploading .lake-image-img {
@@ -1082,13 +1057,13 @@ lake-box[name="image"] .lake-box-focused .lake-image {
   padding: 16px;
 }
 .lake-image.lake-image-error {
-  border: 1px solid var(--box-border-color);
+  border: 1px solid var(--lake-box-border-color);
 }
 .lake-image.lake-image-error ::selection {
   background-color: transparent;
 }
 lake-box[name="image"] .lake-box-selected .lake-image-error {
-  background-color: var(--selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 .lake-image .lake-error-icon {
   line-height: 0;
@@ -1096,12 +1071,12 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
   margin-bottom: 8px;
 }
 .lake-image .lake-error-icon svg {
-  fill: var(--error-color);
+  fill: var(--lake-error-color);
   width: 64px;
   height: 64px;
 }
 .lake-image .lake-error-name {
-  color: var(--error-color);
+  color: var(--lake-error-color);
   line-height: normal;
 }
 /* full screen */
@@ -1129,23 +1104,23 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
 .lake-video .lake-video-form {
   padding: 16px;
   line-height: normal;
-  border: 1px solid var(--box-border-color);
+  border: 1px solid var(--lake-box-border-color);
   border-radius: 4px;
 }
 .lake-video input[type="text"] {
-  font-family: var(--font-family);
+  font-family: var(--lake-font-family);
   font-size: 14px;
-  color: var(--text-color);
+  color: var(--lake-text-color);
   border-radius: 5px;
-  border: 1px solid var(--input-border-color);
+  border: 1px solid var(--lake-input-border-color);
   padding: 4px 10px;
   width: 100%;
 }
 .lake-video input[type="text"]:hover {
-  border: 1px solid var(--input-border-hover-color);
+  border: 1px solid var(--lake-input-border-hover-color);
 }
 .lake-video input[type="text"]:focus-visible {
-  outline: var(--input-outline);
+  outline: var(--lake-input-outline);
   outline-offset: -2px;
 }
 .lake-video .lake-row {
@@ -1154,7 +1129,7 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
 .lake-video .lake-desc-row {
   padding-top: 8px;
   padding-bottom: 16px;
-  color: var(--secondary-text-color);
+  color: var(--lake-secondary-text-color);
 }
 .lake-video .lake-button-row {
   padding-top: 16px;
@@ -1165,7 +1140,7 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
 
 .lake-file {
   position: relative;
-  font-size: 16px;
+  font-size: var(--lake-font-size);
   font-weight: normal;
   line-height: 0;
   border: 1px solid transparent;
@@ -1194,16 +1169,16 @@ lake-box[name="file"] .lake-box-strip {
 .lake-file .lake-file-name {
   line-height: 24px;
   margin-right: 6px;
-  color: var(--link-color);
+  color: var(--lake-link-color);
 }
 lake-box[name="file"] .lake-box-hovered .lake-file {
-  background-color: var(--box-background-color);
+  background-color: var(--lake-box-background-color);
 }
 lake-box[name="file"] .lake-box-selected .lake-file {
-  background-color: var(--selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 lake-box[name="file"] .lake-box-focused .lake-file {
-  background-color: var(--selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 /* uploading status */
 .lake-file-uploading .lake-progress {
@@ -1224,10 +1199,10 @@ lake-box[name="file"] .lake-box-focused .lake-file {
 }
 /* error status */
 .lake-file-error .lake-file-type svg {
-  fill: var(--error-color);
+  fill: var(--lake-error-color);
 }
 .lake-file-error .lake-file-name {
-  color: var(--error-color);
+  color: var(--lake-error-color);
 }
 
 .lake-emoji {
@@ -1242,8 +1217,8 @@ lake-box[name="file"] .lake-box-focused .lake-file {
   height: 32px;
 }
 lake-box[name="emoji"] .lake-box-focused .lake-emoji {
-  border-color: var(--selection-background-color);
-  background-color: var(--selection-background-color);
+  border-color: var(--lake-selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 
 .lake-equation {
@@ -1259,10 +1234,10 @@ lake-box[name="equation"] .lake-box-strip {
   align-self: center;
 }
 lake-box[name="equation"] .lake-box-selected .lake-equation {
-  background-color: var(--selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 lake-box[name="equation"] .lake-box-focused .lake-equation {
-  background-color: var(--selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 .lake-equation .lake-equation-view {
   padding: 0 6px;
@@ -1272,12 +1247,12 @@ lake-box[name="equation"] .lake-box-focused .lake-equation {
   top: 28px;
   left: 0;
   z-index: 1;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--lake-border-color);
   border-radius: 5px;
   padding: 16px;
   width: fit-content;
   background-color: #fff;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--lake-popup-shadow);
   display: none;
 }
 lake-box[name="equation"] .lake-box-focused .lake-equation-form,
@@ -1288,7 +1263,7 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   border: 0;
   font-family: Consolas, Courier, monospace;
   font-size: 14px;
-  color: var(--text-color);
+  color: var(--lake-text-color);
   padding: 0;
   margin-right: 8px;
   width: 300px;
@@ -1309,8 +1284,8 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
 .lake-equation-error {
   padding: 0 6px;
   font-size: 14px;
-  color: var(--error-color);
-  background-color: var(--box-background-color);
+  color: var(--lake-error-color);
+  background-color: var(--lake-box-background-color);
 }
 
 .lake-mention {
@@ -1318,15 +1293,15 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   border-radius: 2px;
 }
 .lake-container[data-readonly="false"] .lake-mention a:hover {
-  color: var(--link-color);
+  color: var(--lake-link-color);
   text-decoration: none;
 }
 lake-box[name="mention"] .lake-box-focused .lake-mention {
-  border-color: var(--selection-background-color);
-  background-color: var(--selection-background-color);
+  border-color: var(--lake-selection-background-color);
+  background-color: var(--lake-selection-background-color);
 }
 .lake-mention-menu {
-  max-height: 180px;
+  max-height: 208px;
 }
 .lake-mention-menu .lake-mention-avatar {
   margin-inline-end: 8px;
@@ -1340,7 +1315,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
 .lake-mention-menu .lake-mention-nickname {
   margin-inline-end: 4px;
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--lake-text-color);
   white-space: nowrap;
 }
 .lake-mention-menu .lake-mention-name {
@@ -1348,7 +1323,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
 }
 
 .lake-slash-menu {
-  max-height: 380px;
+  max-height: 330px;
 }
 .lake-slash-menu .lake-menu-item input[type="file"] {
   display: none;
@@ -1356,8 +1331,9 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
 .lake-slash-menu .lake-slash-icon {
   margin-inline-end: 8px;
   border-radius: 5px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--lake-border-color);
   background-color: #fff;
+  line-height: 0;
 }
 .lake-slash-menu .lake-slash-icon svg,
 .lake-slash-menu .lake-slash-icon img {
@@ -1372,7 +1348,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
 }
 .lake-slash-menu .lake-slash-title {
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--lake-text-color);
 }
 .lake-slash-menu .lake-slash-description {
   color: #8c8c8c;
@@ -1380,7 +1356,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
 
 .lake-toolbar {
   box-sizing: border-box;
-  font-family: var(--font-family);
+  font-family: var(--lake-font-family);
   font-size: 14px;
   font-weight: normal;
   line-height: normal;
@@ -1398,7 +1374,7 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
   width: 1px;
   height: 20px;
   margin: 0 4px;
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--lake-border-color);
   user-select: none;
 }
 .lake-toolbar .lake-upload {
@@ -1407,3 +1383,25 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
 .lake-toolbar .lake-upload input[type="file"] {
   display: none;
 }
+
+.lake-floating-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-border-color);
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 0 2px 0 #00000005;
+  padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.lake-floating-toolbar .lake-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  border-left: 1px solid var(--lake-border-color);
+  user-select: none;
+}