refactor(rich-text-editor): refactor rich-text-editor style

opentiny · Oct 22, 2024 · a320cef · a320cef
1 parent 3175340
commit a320cef
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 53 deletions.
diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
@@ -61,7 +61,7 @@
 
   &__toolbar {
     padding: 8px;
-    border: 1px solid var(--ti-rich-text-editor-box-border-color);
+    border: 1px solid var(--tv-RichTextEditor-border-color);
   }
 
   &__toolbar button {
@@ -84,7 +84,7 @@
 
       svg,
       path {
-        fill: var(--ti-rich-text-editor-button-hover);
+        fill: var(--tv-RichTextEditor-icon-color-hover);
       }
     }
 
@@ -93,11 +93,10 @@
     }
 
     &:disabled {
-      color: var(--ti-rich-text-editor-button-disabled-text-color);
       cursor: not-allowed;
 
       svg {
-        fill: gray;
+        fill: var(--tv-RichTextEditor-icon-color-disabled);
       }
     }
   }
@@ -132,32 +131,23 @@
     .h-options {
       position: absolute;
       padding: 0.15rem;
-      background-color: var(--ti-rich-text-editor-options-bg-color);
+      background-color: var(--tv-RichTextEditor-options-bg-color);
       left: 0;
       display: none;
-      border-radius: var(--ti-rich-text-editor-options-border-radius);
-      box-shadow: var(--ti-rich-text-editor-options-box-shadow);
+      border-radius: var(--tv-RichTextEditor-options-border-radius);
+      box-shadow: var(--tv-RichTextEditor-options-box-shadow);
       z-index: 999;
 
       button {
         color: black;
         margin: 0;
         text-align: center;
-        line-height: var(--ti-common-line-height-3);
+        line-height: var(--tv-RichTextEditor-line-height);
 
         svg,
         path {
           fill: black;
         }
-
-        &:hover {
-          background-color: var(--ti-rich-text-edito-options-item-bg-color);
-
-          svg,
-          path {
-            fill: var(--ti-rich-text-edito-options-item-hover-color);
-          }
-        }
       }
     }
 
@@ -288,22 +278,22 @@
       .line-height-options {
         position: absolute;
         padding: 0.15rem;
-        background-color: var(--ti-rich-text-editor-options-bg-color);
+        background-color: var(--tv-RichTextEditor-options-bg-color);
         left: 0;
         display: none;
-        border-radius: var(--ti-rich-text-editor-options-border-radius);
-        box-shadow: var(--ti-rich-text-editor-options-box-shadow);
+        border-radius: var(--tv-RichTextEditor-options-border-radius);
+        box-shadow: var(--tv-RichTextEditor-options-box-shadow);
         z-index: 999;
 
         button {
           color: black;
           margin: 0;
           text-align: center;
-          line-height: var(--ti-common-line-height-3);
+          line-height: var(--tv-RichTextEditor-line-height);
 
           &:hover {
-            background-color: var(--ti-rich-text-editor-options-item-bg-color);
-            color: var(--ti-rich-text-editor-options-item-hover-color);
+            background-color: var(--tv-RichTextEditor-options-item-bg-color);
+            color: var(--tv-RichTextEditor-options-text-color);
           }
         }
       }
@@ -326,26 +316,26 @@
       .font-size-options {
         display: none;
         position: absolute;
-        border-radius: var(--ti-rich-text-editor-options-border-radius);
-        background-color: var(--ti-rich-text-editor-options-bg-color);
-        box-shadow: var(--ti-rich-text-editor-options-box-shadow);
+        border-radius: var(--tv-RichTextEditor-options-border-radius);
+        background-color: var(--tv-RichTextEditor-options-bg-color);
+        box-shadow: var(--tv-RichTextEditor-options-box-shadow);
         z-index: 99;
 
         button {
           color: black;
           margin: 0;
           text-align: center;
-          line-height: var(--ti-common-line-height-3);
+          line-height: var(--tv-RichTextEditor-line-height);
 
           &:hover {
-            background-color: var(--ti-rich-text-editor-options-item-bg-color);
-            color: var(--ti-rich-text-editor-options-item-hover-color);
+            background-color: var(--tv-RichTextEditor-options-item-bg-color);
+            color: var(--tv-RichTextEditor-options-text-color);
           }
         }
       }
 
       &:hover {
-        background-color: var(--ti-rich-text-editor-options-item-bg-color);
+        background-color: var(--tv-RichTextEditor-options-item-bg-color);
 
         .font-size-options {
           display: flex;
@@ -621,7 +611,7 @@
     overflow: auto;
     padding: 10px;
     height: 100%;
-    border: 1px solid var(--ti-rich-text-editor-box-border-color);
+    border: 1px solid var(--tv-RichTextEditor-border-color);
     border-top: 0;
 
     &::-webkit-scrollbar {
@@ -653,12 +643,12 @@
       display: inline-block;
       width: 10px;
       height: 10px;
-      background: var(--ti-base-color-brand-7);
+      background: #d2e4ff;
       position: absolute;
     }
 
     &__resize {
-      border: 2px solid var(--ti-base-color-brand-7);
+      border: 2px solid var(--tv-RichTextEditor-border-color);
       left: 0;
       position: absolute;
       top: 0;

diff --git a/packages/theme/src/rich-text-editor/vars.less b/packages/theme/src/rich-text-editor/vars.less
@@ -1,26 +1,20 @@
 .component-css-vars-rich-text-editor() {
   // 边框色
-  --ti-rich-text-editor-box-border-color: var(--ti-common-color-line-normal, #c2c2c2);
-  // 没用(hide)
-  --ti-rich-text-editor-box-outline-hover-color: var(--ti-common-color-line-hover, #191919);
-  // 选中或悬浮头部图标色
-  --ti-rich-text-editor-button-hover: var(--ti-common-color-icon-hover, #191919);
-  // 没用(hide)
-  --ti-rich-text-editor-button-active: var(--ti-common-color-icon-active, #191919);
-  // 没有效果(hide)
-  --ti-rich-text-editor-button-disabled-text-color: var(--ti-common-color-icon-disabled, #c2c2c2);
-  // 没用(hide)
-  --ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
-  // 没用(hide)
-  --ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #191919);
+  --tv-RichTextEditor-border-color: var(--tv-color-border);
+  // 富文本行号
+  --tv-RichTextEditor-line-height: var(--tv-line-height-number);
+  // 图标悬浮颜色
+  --tv-RichTextEditor-icon-color-hover: var(--tv-color-icon-hover);
+  // 图标禁用颜色
+  --tv-RichTextEditor-icon-color-disabled: var(--tv-color-icon-disabled);
   // 头部图标弹出下拉框背景色
-  --ti-rich-text-editor-options-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
+  --tv-RichTextEditor-options-bg-color: #ffffff;
   // 头部图标弹出下拉框阴影
-  --ti-rich-text-editor-options-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 #0003);
+  --tv-RichTextEditor-options-box-shadow: var(--tv-shadow-3-down);
   // 头部图标弹出下拉框圆角
-  --ti-rich-text-editor-options-border-radius: var(--ti-common-border-radius-normal, 6px);
-  // 没用(hide)
-  --ti-rich-text-editor-options-item-padding: var(--ti-common-space-6, 6px) var(--ti-common-space-5x, 20px);
-  // 头部图标弹出下拉框选项悬浮文本色
-  --ti-rich-text-editor-options-item-hover-color: var(--ti-common-color-icon-hover, #191919);
+  --tv-RichTextEditor-options-border-radius: var(--tv-border-radius-md);
+  // 头部图标弹出下拉框选项文本色
+  --tv-RichTextEditor-options-text-color: var(--tv-color-text);
+  // 头部图标弹出下拉框选项悬浮背景颜色
+  --tv-RichTextEditor-options-item-bg-color: var(--tv-color-bg-hover);
 }