From 79b9a6efa57d1a30559ea8476bbb380b5957d968 Mon Sep 17 00:00:00 2001
From: liujuping <liujup@foxmail.com>
Date: Thu, 19 Oct 2023 11:05:41 +0800
Subject: [PATCH] feat: add theme color document & optimize some theme colors

---
 docs/docs/guide/expand/editor/cli.md          |  2 +-
 docs/docs/guide/expand/editor/graph.md        |  2 +-
 docs/docs/guide/expand/editor/setter.md       |  2 +-
 docs/docs/guide/expand/editor/theme.md        | 91 +++++++++++++++++++
 .../bem-tools/insertion.less                  |  2 +-
 .../editor-core/src/widgets/tip/style.less    |  4 +-
 .../src/layouts/sub-top-area.tsx              |  8 +-
 .../editor-skeleton/src/layouts/theme.less    | 46 +++++++---
 .../editor-skeleton/src/layouts/top-area.tsx  |  6 +-
 .../src/layouts/workbench.less                | 27 +++---
 .../plugin-outline-pane/src/views/style.less  | 26 +++---
 packages/workspace/src/layouts/workbench.tsx  |  2 +-
 12 files changed, 165 insertions(+), 53 deletions(-)
 create mode 100644 docs/docs/guide/expand/editor/theme.md

diff --git a/docs/docs/guide/expand/editor/cli.md b/docs/docs/guide/expand/editor/cli.md
index 60f44ce87..0577a181d 100644
--- a/docs/docs/guide/expand/editor/cli.md
+++ b/docs/docs/guide/expand/editor/cli.md
@@ -1,6 +1,6 @@
 ---
 title: 低代码生态脚手架 & 调试机制
-sidebar_position: 8
+sidebar_position: 10
 ---
 ## 脚手架简述
 
diff --git a/docs/docs/guide/expand/editor/graph.md b/docs/docs/guide/expand/editor/graph.md
index 2d5127054..a45f34baf 100644
--- a/docs/docs/guide/expand/editor/graph.md
+++ b/docs/docs/guide/expand/editor/graph.md
@@ -1,6 +1,6 @@
 ---
 title: 图编排扩展
-sidebar_position: 9
+sidebar_position: 8
 ---
 ## 项目运行
 ### 前置准备
diff --git a/docs/docs/guide/expand/editor/setter.md b/docs/docs/guide/expand/editor/setter.md
index 01fd949bb..4f0e0219f 100644
--- a/docs/docs/guide/expand/editor/setter.md
+++ b/docs/docs/guide/expand/editor/setter.md
@@ -1,6 +1,6 @@
 ---
 title: 设置器扩展
-sidebar_position: 5
+sidebar_position: 7
 ---
 ## 设置器简述
 
diff --git a/docs/docs/guide/expand/editor/theme.md b/docs/docs/guide/expand/editor/theme.md
new file mode 100644
index 000000000..b62fb4f28
--- /dev/null
+++ b/docs/docs/guide/expand/editor/theme.md
@@ -0,0 +1,91 @@
+---
+title: 主题色扩展
+sidebar_position: 9
+---
+
+## 主题色扩展简述
+
+通过主题色扩展，可以定制多种设计器主题。
+
+## 主题色扩展说明
+
+### 主题色变量
+
+- `--color-brand`: 品牌色
+- `--color-brand-light`: 品牌色（light）
+- `--color-brand-dark`: 品牌色（dark）
+- `--color-icon-normal`: 正常 icon 颜色
+- `--color-icon-hover`: icon hover 态颜色
+- `--color-icon-active`: icon active 态颜色
+- `--color-icon-reverse`: icon 反色
+- `--color-icon-disabled`: icon 禁用态颜色
+- `--color-icon-pane`: icon 面板颜色
+- `--color-line-normal`: 线条颜色
+- `--color-line-darken`: 线条颜色(darken)
+- `--color-title`: 标题颜色
+- `--color-text`: 文字颜色
+- `--color-text-dark`: 文字颜色(dark)
+- `--color-text-light`: 文字颜色(light)
+- `--color-text-reverse`: 反色情况下，文字颜色
+- `--color-text-regular`: 文字颜色(regular)
+- `--color-text-disabled`: 禁用态文字颜色
+- `--color-field-label`: field 标签颜色
+- `--color-field-text`: field 文本颜色
+- `--color-field-placeholder`: field placeholder 颜色
+- `--color-field-border`: field 边框颜色
+- `--color-field-border-hover`: hover 态下，field 边框颜色
+- `--color-field-border-active`: active 态下，field 边框颜色
+- `--color-field-background`: field 背景色
+- `--color-success`: success 颜色
+- `--colo-success-dark`: success 颜色(dark)
+- `--color-success-light`: success 颜色(light)
+- `--color-warning`: warning 颜色
+- `--color-warning-dark`: warning 颜色(dark)
+- `--color-warning-light`: warning 颜色(light)
+- `--color-information`: information 颜色
+- `--color-information-dark`: information 颜色(dark)
+- `--color-information-light`: information 颜色(light)
+- `--color-error`: error 颜色
+- `--color-error-dark`: error 颜色(dark)
+- `--color-error-light`: error 颜色(light)
+- `--color-purple`: purple 颜色
+- `--color-brown`: brown 颜色
+- `--color-pane-background`: 面板背景色
+- `--color-block-background-normal`: 区块背景色
+- `--color-block-background-light`: 区块背景色(light), 作用于画布组件 hover 时遮罩背景色。
+- `--color-block-background-shallow`: 区块背景色 shallow
+- `--color-block-background-dark`: 区块背景色(dark)
+- `--color-block-background-disabled`: 区块背景色(disabled)
+- `--color-block-background-active`: 区块背景色(active)
+- `--color-block-background-warning`: 区块背景色(warning)
+- `--color-block-background-error`: 区块背景色(error)
+- `--color-block-background-success`: 区块背景色(success)
+- `--color-block-background-deep-dark`: 区块背景色(deep-dark)，作用于多个组件同时拖拽的背景色。
+- `--color-layer-mask-background`: 拖拽元素时，元素原来位置的遮罩背景色
+- `--color-layer-tooltip-background`: tooltip 背景色
+- `--color-background`: 设计器主要背景色
+- `--color-top-area-background`: topArea 背景色，优先级大于 `--color-pane-background`
+- `--color-left-area-background`: leftArea 背景色，优先级大于 `--color-pane-background`
+- `--color-workspace-left-area-background`: 应用级 leftArea 背景色，优先级大于 `--color-pane-background`
+- `--color-workspace-top-area-background`: 应用级 topArea 背景色，优先级大于 `--color-pane-background`
+- `--color-workspace-sub-top-area-background`: 应用级二级 topArea 背景色，优先级大于 `--color-pane-background`
+- `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
+- `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
+- `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
+
+### 生态使用主题色变量
+
+插件、物料、设置器等生态为了支持主题色需要对样式进行改造，需要对生态中的样式升级为 css 变量。例如：
+
+```css
+/* before */
+background: #006cff;
+
+/* after */
+background: var(--color-brand, #006cff);
+
+```
+
+### fusion 物料进行主题色扩展
+
+如果使用了 fusion 组件，可以通过 https://fusion.alibaba-inc.com/ 平台进行主题色定制。
\ No newline at end of file
diff --git a/packages/designer/src/builtin-simulator/bem-tools/insertion.less b/packages/designer/src/builtin-simulator/bem-tools/insertion.less
index c51e73106..fff045631 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/insertion.less
+++ b/packages/designer/src/builtin-simulator/bem-tools/insertion.less
@@ -23,6 +23,6 @@
   }
 
   &.invalid {
-    background-color: var(--color-function-error, red);
+    background-color: var(--color-error, var(--color-function-error, red));
   }
 }
diff --git a/packages/editor-core/src/widgets/tip/style.less b/packages/editor-core/src/widgets/tip/style.less
index aa5327f3d..602886d06 100644
--- a/packages/editor-core/src/widgets/tip/style.less
+++ b/packages/editor-core/src/widgets/tip/style.less
@@ -188,9 +188,9 @@
     }
   }
   &.lc-theme-green {
-    background: var(--color-function-success-dark, #57a672);
+    background: var(--color-success-dark, var(--color-function-success-dark, #57a672));
     .lc-arrow:after {
-      border-top-color: var(--color-function-success-dark, #57a672);
+      border-top-color: var(--color-success-dark, var(--color-function-success-dark, #57a672));
     }
   }
   &.lc-visible {
diff --git a/packages/editor-skeleton/src/layouts/sub-top-area.tsx b/packages/editor-skeleton/src/layouts/sub-top-area.tsx
index e6bf61871..cef6aa5b0 100644
--- a/packages/editor-skeleton/src/layouts/sub-top-area.tsx
+++ b/packages/editor-skeleton/src/layouts/sub-top-area.tsx
@@ -13,7 +13,7 @@ export default class SubTopArea extends Component<{ area: Area; itemClassName?:
     }
 
     return (
-      <div className={classNames('lc-sub-top-area engine-actionpane', {
+      <div className={classNames('lc-workspace-sub-top-area lc-sub-top-area engine-actionpane', {
         'lc-area-visible': area.visible,
       })}
       >
@@ -50,13 +50,13 @@ class Contents extends Component<{ area: Area; itemClassName?: string }> {
     });
     let children = [];
     if (left && left.length) {
-      children.push(<div className="lc-sub-top-area-left">{left}</div>);
+      children.push(<div className="lc-workspace-sub-top-area-left lc-sub-top-area-left">{left}</div>);
     }
     if (center && center.length) {
-      children.push(<div className="lc-sub-top-area-center">{center}</div>);
+      children.push(<div className="lc-workspace-sub-top-area-center lc-sub-top-area-center">{center}</div>);
     }
     if (right && right.length) {
-      children.push(<div className="lc-sub-top-area-right">{right}</div>);
+      children.push(<div className="lc-workspace-sub-top-area-right lc-sub-top-area-right">{right}</div>);
     }
     return (
       <Fragment>
diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
index 13fc19c84..716ab3a99 100644
--- a/packages/editor-skeleton/src/layouts/theme.less
+++ b/packages/editor-skeleton/src/layouts/theme.less
@@ -38,20 +38,20 @@
   --color-field-border-active: @normal-alpha-3;
   --color-field-background: @white-alpha-1;
 
-  --color-function-success: @brand-success;
-  --color-function-success-dark: darken(@brand-success, 10%);
-  --color-function-success-light: lighten(@brand-success, 10%);
-  --color-function-warning: @brand-warning;
-  --color-function-warning-dark: darken(@brand-warning, 10%);
-  --color-function-warning-light: lighten(@brand-warning, 10%);
-  --color-function-information: @brand-link-hover;
-  --color-function-information-dark: darken(@brand-link-hover, 10%);
-  --color-function-information-light: lighten(@brand-link-hover, 10%);
-  --color-function-error: @brand-danger;
-  --color-function-error-dark: darken(@brand-danger, 10%);
-  --color-function-error-light: lighten(@brand-danger, 10%);
-  --color-function-purple: rgb(144, 94, 190);
-  --color-function-brown: #7b605b;
+  --color-success: @brand-success;
+  --colo-success-dark: darken(@brand-success, 10%);
+  --color-success-light: lighten(@brand-success, 10%);
+  --color-warning: @brand-warning;
+  --color-warning-dark: darken(@brand-warning, 10%);
+  --color-warning-light: lighten(@brand-warning, 10%);
+  --color-information: @brand-link-hover;
+  --color-information-dark: darken(@brand-link-hover, 10%);
+  --color-information-light: lighten(@brand-link-hover, 10%);
+  --color-error: @brand-danger;
+  --color-error-dark: darken(@brand-danger, 10%);
+  --color-error-light: lighten(@brand-danger, 10%);
+  --color-purple: rgb(144, 94, 190);
+  --color-brown: #7b605b;
 
   --color-pane-background: @white-alpha-1;
   --color-block-background-normal: @white-alpha-1;
@@ -70,3 +70,21 @@
 
   --pane-title-bg-color: rgba(31,56,88,.04);
 }
+
+// @deprecated 变量
+:root {
+  --color-function-success: @brand-success;
+  --color-function-success-dark: darken(@brand-success, 10%);
+  --color-function-success-light: lighten(@brand-success, 10%);
+  --color-function-warning: @brand-warning;
+  --color-function-warning-dark: darken(@brand-warning, 10%);
+  --color-function-warning-light: lighten(@brand-warning, 10%);
+  --color-function-information: @brand-link-hover;
+  --color-function-information-dark: darken(@brand-link-hover, 10%);
+  --color-function-information-light: lighten(@brand-link-hover, 10%);
+  --color-function-error: @brand-danger;
+  --color-function-error-dark: darken(@brand-danger, 10%);
+  --color-function-error-light: lighten(@brand-danger, 10%);
+  --color-function-purple: rgb(144, 94, 190);
+  --color-function-brown: #7b605b;
+}
diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx
index 56949cbb7..f6b84b3e6 100644
--- a/packages/editor-skeleton/src/layouts/top-area.tsx
+++ b/packages/editor-skeleton/src/layouts/top-area.tsx
@@ -4,14 +4,14 @@ import { observer } from '@alilc/lowcode-editor-core';
 import { Area } from '../area';
 
 @observer
-export default class TopArea extends Component<{ area: Area; itemClassName?: string }> {
+export default class TopArea extends Component<{ area: Area; itemClassName?: string; className?: string }> {
   render() {
-    const { area, itemClassName } = this.props;
+    const { area, itemClassName, className } = this.props;
     if (area.isEmpty()) {
       return null;
     }
     return (
-      <div className={classNames('lc-top-area engine-actionpane', {
+      <div className={classNames(className, 'lc-top-area engine-actionpane', {
         'lc-area-visible': area.visible,
       })}
       >
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
index 58123ea46..6d0604a1f 100644
--- a/packages/editor-skeleton/src/layouts/workbench.less
+++ b/packages/editor-skeleton/src/layouts/workbench.less
@@ -141,7 +141,7 @@ body {
     flex-direction: column;
     background-color: var(--color-background);
   }
-  .lc-top-area, .lc-sub-top-area {
+  .lc-top-area, .lc-workspace-sub-top-area {
     width: 100%;
     display: none;
     margin-bottom: 2px;
@@ -152,30 +152,34 @@ body {
       height: var(--top-area-height);
     }
 
-    &.lc-sub-top-area {
-      background-color: var(--color-sub-top-area-background, var(--color-pane-background));
-      height: var(--sub-top-area-height, var(--top-area-height));
-      margin: var(--sub-top-area-margin, 0px 0px 2px 0px);
-      padding: var(--sub-top-area-padding, 8px 12px 8px 16px);
+    &.lc-workspace-top-area {
+      background-color: var(--color-workspace-top-area-background, var(--color-pane-background));
+    }
+
+    &.lc-workspace-sub-top-area {
+      background-color: var(--color-workspace-sub-top-area-background, var(--color-pane-background));
+      height: var(--workspace-sub-top-area-height, var(--top-area-height));
+      margin: var(--workspace-sub-top-area-margin, 0px 0px 2px 0px);
+      padding: var(--workspace-sub-top-area-padding, 8px 12px 8px 16px);
     }
 
     &.lc-area-visible {
       display: flex;
     }
 
-    .lc-top-area-left, .lc-sub-top-area-left {
+    .lc-top-area-left, .lc-workspace-sub-top-area-left {
       display: flex;
       align-items: center;
       max-width: 100%;
     }
 
-    .lc-top-area-center, .lc-sub-top-area-center {
+    .lc-top-area-center, .lc-workspace-sub-top-area-center {
       flex: 1;
       display: flex;
       justify-content: center;
       margin: 0 8px;
     }
-    .lc-top-area-right, .lc-sub-top-area-right {
+    .lc-top-area-right, .lc-workspace-sub-top-area-right {
       display: flex;
       align-items: center;
       > * {
@@ -275,9 +279,8 @@ body {
       flex-direction: column;
       justify-content: space-between;
       overflow: hidden;
-      &.lc-left-area {
-        background-color: var(--color-left-area-background, var(--color-pane-background));
-      }
+      background-color: var(--color-left-area-background, var(--color-pane-background));
+
       &.lc-workspace-left-area {
         background-color: var(--color-workspace-left-area-background, var(--color-pane-background));
       }
diff --git a/packages/plugin-outline-pane/src/views/style.less b/packages/plugin-outline-pane/src/views/style.less
index 37f51a170..15f115ea6 100644
--- a/packages/plugin-outline-pane/src/views/style.less
+++ b/packages/plugin-outline-pane/src/views/style.less
@@ -120,20 +120,20 @@
     transform: translateZ(0);
     transition: all 0.2s ease-in-out;
     &.invalid {
-      border-color: var(--color-function-error, red);
+      border-color: var(--color-error, var(--color-function-error, red));
       background-color: var(--color-block-background-error, rgba(240, 154, 154, 0.719));
     }
   }
 
   .condition-group-container {
-    border-bottom: 1px solid var(--color-function-brown, #7b605b);
+    border-bottom: 1px solid var(--color-brown, var(--color-function-brown, #7b605b));
     position: relative;
 
     &:before {
       position: absolute;
       display: block;
       width: 0;
-      border-left: 0.5px solid var(--color-function-brown, #7b605b);
+      border-left: 0.5px solid var(--color-brown, var(--color-function-brown, #7b605b));
       height: 100%;
       top: 0;
       left: 0;
@@ -142,7 +142,7 @@
     }
     > .condition-group-title {
       text-align: center;
-      background-color: var(--color-function-brown, #7b605b);
+      background-color: var(--color-brown, var(--color-function-brown, #7b605b));
       height: 14px;
       > .lc-title {
         font-size: 12px;
@@ -155,13 +155,13 @@
     }
   }
   .tree-node-slots {
-    border-bottom: 1px solid var(--color-function-purple, rgb(144, 94, 190));
+    border-bottom: 1px solid var(--color-purple, var(--color-function-purple, rgb(144, 94, 190)));
     position: relative;
     &::before {
       position: absolute;
       display: block;
       width: 0;
-      border-left: 0.5px solid var(--color-function-purple, rgb(144, 94, 190));
+      border-left: 0.5px solid var(--color-purple, var(--color-function-purple, rgb(144, 94, 190)));
       height: 100%;
       top: 0;
       left: 0;
@@ -170,7 +170,7 @@
     }
     > .tree-node-slots-title {
       text-align: center;
-      background-color: var(--color-function-purple, rgb(144, 94, 190));
+      background-color: var(--color-purple, var(--color-function-purple, rgb(144, 94, 190)));
       height: 14px;
       > .lc-title {
         font-size: 12px;
@@ -183,12 +183,12 @@
     }
     &.insertion-at-slots {
       padding-bottom: @treeNodeHeight;
-      border-bottom-color: var(--color-function-error-dark, rgb(182, 55, 55));
+      border-bottom-color: var(--color-error-dark, var(--color-function-error-dark, rgb(182, 55, 55)));
       > .tree-node-slots-title {
-        background-color: var(--color-function-error-dark, rgb(182, 55, 55));
+        background-color: var(--color-error-dark, var(--color-function-error-dark, rgb(182, 55, 55)));
       }
       &::before {
-        border-left-color: var(--color-function-error-dark, rgb(182, 55, 55));
+        border-left-color: var(--color-error-dark, var(--color-function-error-dark, rgb(182, 55, 55)));
       }
     }
   }
@@ -326,13 +326,13 @@
         align-items: center;
         line-height: 0;
         &.cond {
-          color: var(--color-function-error, rgb(179, 52, 6));
+          color: var(--color-error, var(--color-function-error, rgb(179, 52, 6)));
         }
         &.loop {
-          color: var(--color-function-success, rgb(103, 187, 187));
+          color: var(--color-success, var(--color-function-success, rgb(103, 187, 187)));
         }
         &.slot {
-          color: var(--color-function-purple, rgb(211, 90, 211));
+          color: var(--color-purple, var(--color-function-purple, rgb(211, 90, 211)));
         }
       }
     }
diff --git a/packages/workspace/src/layouts/workbench.tsx b/packages/workspace/src/layouts/workbench.tsx
index 9bdbe3f93..2913576e1 100644
--- a/packages/workspace/src/layouts/workbench.tsx
+++ b/packages/workspace/src/layouts/workbench.tsx
@@ -47,7 +47,7 @@ export class Workbench extends Component<{
     return (
       <div className={classNames('lc-workspace-workbench', className, theme)}>
         <SkeletonContext.Provider value={skeleton}>
-          <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
+          <TopArea className="lc-workspace-top-area" area={skeleton.topArea} itemClassName={topAreaItemClassName} />
           <div className="lc-workspace-workbench-body">
             <LeftArea className="lc-workspace-left-area lc-left-area" area={skeleton.leftArea} />
             <LeftFloatPane area={skeleton.leftFloatArea} />