diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less index c924e7414c..73c2d45d59 100644 --- 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 index 0d543ac5f8..f2a0b0a357 100644 --- 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); }