From ba50a54e9b3210022a80c550395b90c2f84a8b31 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Wed, 13 Apr 2022 20:49:38 +0800
Subject: [PATCH] refactor: use global css variable

---
 packages/client/src/styles/var.scss           | 11 ---
 packages/client/src/tiptap/styles/index.scss  |  2 +
 packages/client/src/tiptap/styles/node.scss   | 76 +++++++++++++++++++
 .../client/src/tiptap/styles/selection.scss   | 63 ---------------
 packages/client/src/tiptap/styles/var.scss    | 17 +++++
 .../attachment/player/index.module.scss       |  2 +-
 .../tiptap/wrappers/banner/index.module.scss  |  4 +-
 .../wrappers/code-block/index.module.scss     |  2 +-
 .../wrappers/countdown/index.module.scss      |  2 +-
 .../document-children/index.module.scss       | 12 +--
 .../document-reference/index.module.scss      | 14 ++--
 .../tiptap/wrappers/iframe/index.module.scss  |  2 +-
 .../tiptap/wrappers/image/index.module.scss   |  2 +-
 .../tiptap/wrappers/mind/index.module.scss    | 10 +--
 14 files changed, 120 insertions(+), 99 deletions(-)
 create mode 100644 packages/client/src/tiptap/styles/node.scss
 create mode 100644 packages/client/src/tiptap/styles/var.scss

diff --git a/packages/client/src/styles/var.scss b/packages/client/src/styles/var.scss
index 105ca8a5..1827cdcb 100644
--- a/packages/client/src/styles/var.scss
+++ b/packages/client/src/styles/var.scss
@@ -1,15 +1,4 @@
 body {
   --border-radius: 4px;
   --box-shadow: rgb(0 0 0 / 10%) 0 0 10px;
-
-  /* 自定义节点 边框 */
-  --node-border-color: rgb(28 31 35 / 8%);
-  /* 自定义节点 hover */
-  --node-hover-border-color: #bacefd;
-  /* 自定义节点选中 */
-  --node-selected-border-color: rgb(0 101 255);
-}
-
-body[theme-mode='dark'] {
-  --node-border-color: rgb(255, 255, 255, 0.08);
 }
diff --git a/packages/client/src/tiptap/styles/index.scss b/packages/client/src/tiptap/styles/index.scss
index ae8767e3..6f07ccb4 100644
--- a/packages/client/src/tiptap/styles/index.scss
+++ b/packages/client/src/tiptap/styles/index.scss
@@ -1,3 +1,4 @@
+@import './var.scss';
 @import './base.scss';
 @import './code.scss';
 @import './collaboration.scss';
@@ -8,6 +9,7 @@
 @import './mention.scss';
 @import './menu.scss';
 @import './mind.scss';
+@import './node.scss';
 @import './placeholder.scss';
 @import './search.scss';
 @import './selection.scss';
diff --git a/packages/client/src/tiptap/styles/node.scss b/packages/client/src/tiptap/styles/node.scss
new file mode 100644
index 00000000..9de6abd9
--- /dev/null
+++ b/packages/client/src/tiptap/styles/node.scss
@@ -0,0 +1,76 @@
+/* 自定义节点样式 */
+.ProseMirror {
+  .node-status {
+    margin-right: 4px;
+
+    .semi-tag-default {
+      border: 1px solid var(--node-border-color);
+    }
+  }
+
+  .node-codeBlock,
+  .node-katex,
+  .node-documentChildren,
+  .node-documentReference {
+    user-select: none;
+
+    .render-wrapper {
+      border: 1px solid var(--node-border-color);
+    }
+  }
+
+  .node-codeBlock,
+  .node-katex {
+    .render-wrapper {
+      border-radius: var(--border-radius);
+    }
+  }
+
+  .node-image,
+  .node-attachment,
+  .node-iframe,
+  .node-mind,
+  .node-banner,
+  .node-countdown {
+    margin-top: 0.75em;
+  }
+
+  .node-attachment,
+  .node-banner,
+  .node-countdown,
+  .node-iframe,
+  .node-katex,
+  .node-mind,
+  .node-codeBlock,
+  .node-documentChildren,
+  .node-documentReference {
+    .render-wrapper {
+      position: relative;
+      user-select: text;
+
+      &:hover,
+      &:active {
+        border: 1px solid var(--node-hover-border-color);
+      }
+    }
+  }
+
+  .node-image {
+    .render-wrapper {
+      position: relative;
+
+      &:hover,
+      &:active {
+        &::after {
+          position: absolute;
+          content: '';
+          inset: 0;
+          pointer-events: none;
+          background-color: transparent;
+          border: 1px solid var(--node-hover-border-color) !important;
+          border-radius: var(--border-radius);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/client/src/tiptap/styles/selection.scss b/packages/client/src/tiptap/styles/selection.scss
index e3182838..987aa313 100644
--- a/packages/client/src/tiptap/styles/selection.scss
+++ b/packages/client/src/tiptap/styles/selection.scss
@@ -4,10 +4,6 @@
   }
 
   .tableWrapper {
-    ::selection {
-      //background-color: transparent;
-    }
-
     &.selected-node {
       td,
       th {
@@ -17,12 +13,6 @@
   }
 
   .node-status {
-    margin-right: 4px;
-
-    .semi-tag-default {
-      border: 1px solid var(--node-border-color);
-    }
-
     &.selected-node {
       .semi-tag-default {
         border: 1px solid var(--node-selected-border-color);
@@ -30,33 +20,6 @@
     }
   }
 
-  .node-codeBlock,
-  .node-katex,
-  .node-documentChildren,
-  .node-documentReference {
-    user-select: none;
-
-    .render-wrapper {
-      border: 1px solid var(--node-border-color);
-    }
-  }
-
-  .node-codeBlock,
-  .node-katex {
-    .render-wrapper {
-      border-radius: var(--border-radius);
-    }
-  }
-
-  .node-image,
-  .node-attachment,
-  .node-iframe,
-  .node-mind,
-  .node-banner,
-  .node-countdown {
-    margin-top: 0.75em;
-  }
-
   .node-attachment,
   .node-banner,
   .node-countdown,
@@ -66,16 +29,6 @@
   .node-codeBlock,
   .node-documentChildren,
   .node-documentReference {
-    .render-wrapper {
-      position: relative;
-      user-select: text;
-
-      &:hover,
-      &:active {
-        border: 1px solid var(--node-hover-border-color);
-      }
-    }
-
     &.selected-node {
       &:not(.has-focus) {
         ::selection {
@@ -105,22 +58,6 @@
   }
 
   .node-image {
-    .render-wrapper {
-      position: relative;
-      &:hover,
-      &:active {
-        &::after {
-          position: absolute;
-          content: '';
-          inset: 0;
-          pointer-events: none;
-          background-color: transparent;
-          border: 1px solid var(--node-hover-border-color) !important;
-          border-radius: var(--border-radius);
-        }
-      }
-    }
-
     &.selected-node {
       &:not(.has-focus) {
         ::selection {
diff --git a/packages/client/src/tiptap/styles/var.scss b/packages/client/src/tiptap/styles/var.scss
new file mode 100644
index 00000000..60cea855
--- /dev/null
+++ b/packages/client/src/tiptap/styles/var.scss
@@ -0,0 +1,17 @@
+.ProseMirror {
+  --node-text-color: rgba(3, 3, 3, 0.8);
+  --node-hover-text-color: rgb(0 101 255);
+  /* 自定义节点 边框 */
+  --node-border-color: rgb(28 31 35 / 8%);
+  /* 自定义节点 hover */
+  --node-hover-border-color: rgb(0 101 255);
+  /* 自定义节点选中 */
+  --node-selected-border-color: rgb(0 101 255);
+}
+
+body[theme-mode='dark'] {
+  .ProseMirror {
+    --node-text-color: rgba(249, 249, 249, 0.8);
+    --node-border-color: rgb(255, 255, 255, 0.08);
+  }
+}
diff --git a/packages/client/src/tiptap/wrappers/attachment/player/index.module.scss b/packages/client/src/tiptap/wrappers/attachment/player/index.module.scss
index e432b8ef..a5d64074 100644
--- a/packages/client/src/tiptap/wrappers/attachment/player/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/attachment/player/index.module.scss
@@ -2,7 +2,7 @@
   width: 100%;
   display: flex;
   justify-content: center;
-  border-top: 1px solid var(--semi-color-border);
+  border-top: 1px solid var(--node-border-color);
   padding: 12px;
 
   > video {
diff --git a/packages/client/src/tiptap/wrappers/banner/index.module.scss b/packages/client/src/tiptap/wrappers/banner/index.module.scss
index b7a2ccff..3794e0d5 100644
--- a/packages/client/src/tiptap/wrappers/banner/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/banner/index.module.scss
@@ -1,10 +1,10 @@
 .wrap {
   line-height: 0;
-  border: 1px solid var(--semi-color-border);
+  border: 1px solid var(--node-border-color);
   border-radius: var(--border-radius);
 
   p {
-    margin-top: .25em;
+    margin-top: 0.25em;
   }
 
   p:first-child {
diff --git a/packages/client/src/tiptap/wrappers/code-block/index.module.scss b/packages/client/src/tiptap/wrappers/code-block/index.module.scss
index c46713c7..e29551cd 100644
--- a/packages/client/src/tiptap/wrappers/code-block/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/code-block/index.module.scss
@@ -6,7 +6,7 @@
     display: flex;
     justify-content: space-between;
     padding: 6px 8px;
-    border-bottom: 1px solid var(--semi-color-border);
+    border-bottom: 1px solid var(--node-border-color);
     background-color: var(--semi-color-fill-0);
 
     .selectorWrap {
diff --git a/packages/client/src/tiptap/wrappers/countdown/index.module.scss b/packages/client/src/tiptap/wrappers/countdown/index.module.scss
index 3b195896..dd38f9b7 100644
--- a/packages/client/src/tiptap/wrappers/countdown/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/countdown/index.module.scss
@@ -3,7 +3,7 @@
   overflow: hidden;
   line-height: 0;
   background-color: var(--semi-color-fill-0);
-  border: 1px solid var(--semi-color-border);
+  border: 1px solid var(--node-border-color);
   border-radius: var(--border-radius);
 
   display: flex;
diff --git a/packages/client/src/tiptap/wrappers/document-children/index.module.scss b/packages/client/src/tiptap/wrappers/document-children/index.module.scss
index e7fa78a0..23de4dd2 100644
--- a/packages/client/src/tiptap/wrappers/document-children/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/document-children/index.module.scss
@@ -1,23 +1,23 @@
 .wrap {
   padding: 12px;
-  margin-top: .75em;
-  border: 1px solid var(--semi-color-border);
+  margin-top: 0.75em;
+  border: 1px solid var(--node-border-color);
   border-radius: var(--border-radius);
 
   .itemWrap {
     display: flex;
     padding: 6px;
     margin-top: 12px;
-    color: var(--semi-color-text-1);
+    color: var(--node-text-color);
     text-decoration: none;
     cursor: pointer;
-    border: 1px solid var(--semi-color-border);
+    border: 1px solid var(--node-border-color);
     border-radius: var(--border-radius);
     align-items: center;
 
     &:hover {
-      border-color: var(--semi-color-link);
-      color: var(--semi-color-link);
+      border-color: var(--node-hover-border-color);
+      color: var(--node-hover-text-color);
     }
 
     span {
diff --git a/packages/client/src/tiptap/wrappers/document-reference/index.module.scss b/packages/client/src/tiptap/wrappers/document-reference/index.module.scss
index cad78957..38042ef5 100644
--- a/packages/client/src/tiptap/wrappers/document-reference/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/document-reference/index.module.scss
@@ -1,19 +1,19 @@
 .wrap {
-  margin-top: .75em;
+  margin-top: 0.75em;
   border-radius: var(--border-radius);
 
   .itemWrap {
     display: flex;
     padding: 8px;
-    color: var(--semi-color-text-1);
+    color: var(--node-text-color);
     text-decoration: none;
-    border: 1px solid var(--semi-color-border);
+    border: 1px solid var(--node-border-color);
     border-radius: var(--border-radius);
     align-items: center;
 
     &:hover {
-      border-color: var(--semi-color-link);
-      color: var(--semi-color-link);
+      border-color: var(--node-hover-border-color);
+      color: var(--node-hover-text-color);
     }
 
     span {
@@ -24,10 +24,10 @@
   .empty {
     display: flex;
     padding: 8px;
-    color: var(--semi-color-text-1);
+    color: var(--node-text-color);
     text-decoration: none;
     cursor: not-allowed;
-    border: 1px solid var(--semi-color-border);
+    border: 1px solid var(--node-border-color);
     border-radius: var(--border-radius);
     align-items: center;
   }
diff --git a/packages/client/src/tiptap/wrappers/iframe/index.module.scss b/packages/client/src/tiptap/wrappers/iframe/index.module.scss
index c0aa550a..60554b85 100644
--- a/packages/client/src/tiptap/wrappers/iframe/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/iframe/index.module.scss
@@ -5,7 +5,7 @@
   overflow: hidden;
   line-height: 0;
   background-color: var(--semi-color-fill-0);
-  border: 1px solid var(--semi-color-border);
+  border: 1px solid var(--node-border-color);
   border-radius: var(--border-radius);
   flex-direction: column;
 
diff --git a/packages/client/src/tiptap/wrappers/image/index.module.scss b/packages/client/src/tiptap/wrappers/image/index.module.scss
index 326b5aba..edb7b58a 100644
--- a/packages/client/src/tiptap/wrappers/image/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/image/index.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   padding: 8px 16px;
   cursor: pointer;
-  border: 1px solid var(--semi-color-border);
+  border: 1px solid var(--node-border-color);
   border-radius: var(--border-radius);
   justify-content: space-between;
   align-items: center;
diff --git a/packages/client/src/tiptap/wrappers/mind/index.module.scss b/packages/client/src/tiptap/wrappers/mind/index.module.scss
index 41076878..b0713421 100644
--- a/packages/client/src/tiptap/wrappers/mind/index.module.scss
+++ b/packages/client/src/tiptap/wrappers/mind/index.module.scss
@@ -40,7 +40,7 @@
         align-items: center;
         width: 12px;
         height: 12px;
-        border-color: var(--semi-color-border);
+        border-color: var(--node-border-color);
       }
     }
   }
@@ -58,7 +58,7 @@
     .jsmindInnerWrap {
       padding: 6px;
       background-color: var(--semi-color-bg-2);
-      border: 1px solid var(--semi-color-border);
+      border: 1px solid var(--node-border-color);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
     }
@@ -68,7 +68,7 @@
     position: relative;
     min-height: 50px;
     overflow: hidden;
-    border: 1px solid var(--semi-color-border);
+    border: 1px solid var(--node-border-color);
     border-radius: var(--border-radius);
     outline: none;
 
@@ -89,7 +89,7 @@
       z-index: 1000;
       padding: 4px 8px;
       background-color: var(--semi-color-bg-2);
-      border: 1px solid var(--semi-color-border);
+      border: 1px solid var(--node-border-color);
       border-radius: var(--border-radius);
       opacity: 0;
       box-shadow: var(--box-shadow);
@@ -112,6 +112,6 @@
     display: flex;
     justify-content: center;
     padding: 10px;
-    border-top: 1px solid var(--semi-color-border);
+    border-top: 1px solid var(--node-border-color);
   }
 }