github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-10 18:03:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: add css themes vars

Browse Source
This commit is contained in:
liujuping 2023-12-07 11:03:07 +08:00 committed by 林熠
parent 3786b3a7ff
commit 1f214918bb
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/docs/guide/expand/editor/theme.md
View File

@ -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`: 拖拽元素时，元素原来位置的遮罩背景色

2
packages/designer/src/builtin-simulator/bem-tools/borders.less
View File

@ -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 {

8
packages/editor-skeleton/src/layouts/theme.less
View File

@ -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);
}