style: add css themes vars

alibaba · Dec 7, 2023 · 1f21491 · 1f21491
1 parent 3786b3a
commit 1f21491
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/docs/docs/guide/expand/editor/theme.md b/docs/docs/guide/expand/editor/theme.md
@@ -35,6 +35,7 @@ sidebar_position: 9
 #### Icon 相关颜色
 
 - `--color-icon-normal`: 默认状态
+- `--color-icon-light`: icon light 状态
 - `--color-icon-hover`: 鼠标悬停状态
 - `--color-icon-active`: 激活状态
 - `--color-icon-reverse`: 反色状态
@@ -82,16 +83,21 @@ sidebar_position: 9
 #### 区块背景色
 
 - `--color-block-background-normal`: 区块背景色
-- `--color-block-background-light`: 区块背景色(light), 作用于画布组件 hover 时遮罩背景色。
+- `--color-block-background-light`: 区块背景色(light)。
 - `--color-block-background-shallow`: 区块背景色 shallow
 - `--color-block-background-dark`: 区块背景色(dark)
 - `--color-block-background-disabled`: 区块背景色(disabled)
 - `--color-block-background-active`: 区块背景色(active)
+- `--color-block-background-active-light`: 区块背景色(active light)
 - `--color-block-background-warning`: 区块背景色(warning)
 - `--color-block-background-error`: 区块背景色(error)
 - `--color-block-background-success`: 区块背景色(success)
 - `--color-block-background-deep-dark`: 区块背景色(deep-dark)，作用于多个组件同时拖拽的背景色。
 
+#### 引擎相关颜色
+
+- `--color-canvas-detecting-background`: 画布组件 hover 时遮罩背景色。
+
 #### 其他区域背景色
 
 - `--color-layer-mask-background`: 拖拽元素时，元素原来位置的遮罩背景色

diff --git a/packages/designer/src/builtin-simulator/bem-tools/borders.less b/packages/designer/src/builtin-simulator/bem-tools/borders.less
@@ -100,7 +100,7 @@
   &&-detecting {
     z-index: 1;
     border-style: dashed;
-    background: var(--color-block-background-light, rgba(0,121,242,.04));
+    background: var(--color-canvas-detecting-background, rgba(0,121,242,.04));
   }
 
   &&-selecting {

diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
@@ -14,6 +14,7 @@
 
   --color-icon-normal: @normal-alpha-4;
   --color-icon-hover: @normal-alpha-3;
+  --color-icon-light: @normal-alpha-5;
   --color-icon-active: @brand-color-1;
   --color-icon-reverse: @white-alpha-1;
   --color-icon-disabled: @normal-alpha-6;
@@ -55,10 +56,11 @@
   --color-pane-background: @white-alpha-1;
   --color-block-background-normal: @white-alpha-1;
   --color-block-background-light: @normal-alpha-9;
-  --color-block-background-shallow: @normal-alpha-8;
   --color-block-background-dark: @normal-alpha-7;
+  --color-block-background-shallow: @normal-alpha-8;
   --color-block-background-disabled: @normal-alpha-6;
-  --color-block-background-active: @brand-color-1-7;
+  --color-block-background-active: @brand-color-1;
+  --color-block-background-active-light: @brand-color-1-7;
   --color-block-background-warning: @brand-warning-alpha-7;
   --color-block-background-error: @brand-danger-alpha-7;
   --color-block-background-success: @brand-success-alpha-7;
@@ -67,6 +69,8 @@
   --color-layer-tooltip-background: rgba(44,47,51,0.8);
   --color-background: #edeff3;
 
+  --color-canvas-detecting-background: rgba(0,121,242,.04);
+
   --pane-title-bg-color: rgba(31,56,88,.04);
 }