Skip to content

Commit 79b9a6e

Browse files
liujupingJackLian
liujuping
authored and
JackLian
committed
feat: add theme color document & optimize some theme colors
1 parent 96fe876 commit 79b9a6e

File tree

12 files changed

+165
-53
lines changed

12 files changed

+165
-53
lines changed

‎docs/docs/guide/expand/editor/cli.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: 低代码生态脚手架 & 调试机制
3-
sidebar_position: 8
3+
sidebar_position: 10
44
---
55
## 脚手架简述
66

‎docs/docs/guide/expand/editor/graph.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: 图编排扩展
3-
sidebar_position: 9
3+
sidebar_position: 8
44
---
55
## 项目运行
66
### 前置准备

‎docs/docs/guide/expand/editor/setter.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: 设置器扩展
3-
sidebar_position: 5
3+
sidebar_position: 7
44
---
55
## 设置器简述
66

‎docs/docs/guide/expand/editor/theme.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: 主题色扩展
3+
sidebar_position: 9
4+
---
5+
6+
## 主题色扩展简述
7+
8+
通过主题色扩展，可以定制多种设计器主题。
9+
10+
## 主题色扩展说明
11+
12+
### 主题色变量
13+
14+
- `--color-brand`: 品牌色
15+
- `--color-brand-light`: 品牌色（light）
16+
- `--color-brand-dark`: 品牌色（dark）
17+
- `--color-icon-normal`: 正常 icon 颜色
18+
- `--color-icon-hover`: icon hover 态颜色
19+
- `--color-icon-active`: icon active 态颜色
20+
- `--color-icon-reverse`: icon 反色
21+
- `--color-icon-disabled`: icon 禁用态颜色
22+
- `--color-icon-pane`: icon 面板颜色
23+
- `--color-line-normal`: 线条颜色
24+
- `--color-line-darken`: 线条颜色(darken)
25+
- `--color-title`: 标题颜色
26+
- `--color-text`: 文字颜色
27+
- `--color-text-dark`: 文字颜色(dark)
28+
- `--color-text-light`: 文字颜色(light)
29+
- `--color-text-reverse`: 反色情况下，文字颜色
30+
- `--color-text-regular`: 文字颜色(regular)
31+
- `--color-text-disabled`: 禁用态文字颜色
32+
- `--color-field-label`: field 标签颜色
33+
- `--color-field-text`: field 文本颜色
34+
- `--color-field-placeholder`: field placeholder 颜色
35+
- `--color-field-border`: field 边框颜色
36+
- `--color-field-border-hover`: hover 态下，field 边框颜色
37+
- `--color-field-border-active`: active 态下，field 边框颜色
38+
- `--color-field-background`: field 背景色
39+
- `--color-success`: success 颜色
40+
- `--colo-success-dark`: success 颜色(dark)
41+
- `--color-success-light`: success 颜色(light)
42+
- `--color-warning`: warning 颜色
43+
- `--color-warning-dark`: warning 颜色(dark)
44+
- `--color-warning-light`: warning 颜色(light)
45+
- `--color-information`: information 颜色
46+
- `--color-information-dark`: information 颜色(dark)
47+
- `--color-information-light`: information 颜色(light)
48+
- `--color-error`: error 颜色
49+
- `--color-error-dark`: error 颜色(dark)
50+
- `--color-error-light`: error 颜色(light)
51+
- `--color-purple`: purple 颜色
52+
- `--color-brown`: brown 颜色
53+
- `--color-pane-background`: 面板背景色
54+
- `--color-block-background-normal`: 区块背景色
55+
- `--color-block-background-light`: 区块背景色(light), 作用于画布组件 hover 时遮罩背景色。
56+
- `--color-block-background-shallow`: 区块背景色 shallow
57+
- `--color-block-background-dark`: 区块背景色(dark)
58+
- `--color-block-background-disabled`: 区块背景色(disabled)
59+
- `--color-block-background-active`: 区块背景色(active)
60+
- `--color-block-background-warning`: 区块背景色(warning)
61+
- `--color-block-background-error`: 区块背景色(error)
62+
- `--color-block-background-success`: 区块背景色(success)
63+
- `--color-block-background-deep-dark`: 区块背景色(deep-dark)，作用于多个组件同时拖拽的背景色。
64+
- `--color-layer-mask-background`: 拖拽元素时，元素原来位置的遮罩背景色
65+
- `--color-layer-tooltip-background`: tooltip 背景色
66+
- `--color-background`: 设计器主要背景色
67+
- `--color-top-area-background`: topArea 背景色，优先级大于 `--color-pane-background`
68+
- `--color-left-area-background`: leftArea 背景色，优先级大于 `--color-pane-background`
69+
- `--color-workspace-left-area-background`: 应用级 leftArea 背景色，优先级大于 `--color-pane-background`
70+
- `--color-workspace-top-area-background`: 应用级 topArea 背景色，优先级大于 `--color-pane-background`
71+
- `--color-workspace-sub-top-area-background`: 应用级二级 topArea 背景色，优先级大于 `--color-pane-background`
72+
- `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
73+
- `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
74+
- `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
75+
76+
### 生态使用主题色变量
77+
78+
插件、物料、设置器等生态为了支持主题色需要对样式进行改造，需要对生态中的样式升级为 css 变量。例如：
79+
80+
```css
81+
/* before */
82+
background: #006cff;
83+
84+
/* after */
85+
background: var(--color-brand, #006cff);
86+
87+
```
88+
89+
### fusion 物料进行主题色扩展
90+
91+
如果使用了 fusion 组件，可以通过 https://fusion.alibaba-inc.com/ 平台进行主题色定制。

‎packages/designer/src/builtin-simulator/bem-tools/insertion.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@
2323
}
2424

2525
&.invalid {
26-
background-color: var(--color-function-error, red);
26+
background-color: var(--color-error, var(--color-function-error, red));
2727
}
2828
}

‎packages/editor-core/src/widgets/tip/style.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,9 +188,9 @@
188188
}
189189
}
190190
&.lc-theme-green {
191-
background: var(--color-function-success-dark, #57a672);
191+
background: var(--color-success-dark, var(--color-function-success-dark, #57a672));
192192
.lc-arrow:after {
193-
border-top-color: var(--color-function-success-dark, #57a672);
193+
border-top-color: var(--color-success-dark, var(--color-function-success-dark, #57a672));
194194
}
195195
}
196196
&.lc-visible {

‎packages/editor-skeleton/src/layouts/sub-top-area.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default class SubTopArea extends Component<{ area: Area; itemClassName?:
1313
}
1414

1515
return (
16-
<div className={classNames('lc-sub-top-area engine-actionpane', {
16+
<div className={classNames('lc-workspace-sub-top-area lc-sub-top-area engine-actionpane', {
1717
'lc-area-visible': area.visible,
1818
})}
1919
>
@@ -50,13 +50,13 @@ class Contents extends Component<{ area: Area; itemClassName?: string }> {
5050
});
5151
let children = [];
5252
if (left && left.length) {
53-
children.push(<div className="lc-sub-top-area-left">{left}</div>);
53+
children.push(<div className="lc-workspace-sub-top-area-left lc-sub-top-area-left">{left}</div>);
5454
}
5555
if (center && center.length) {
56-
children.push(<div className="lc-sub-top-area-center">{center}</div>);
56+
children.push(<div className="lc-workspace-sub-top-area-center lc-sub-top-area-center">{center}</div>);
5757
}
5858
if (right && right.length) {
59-
children.push(<div className="lc-sub-top-area-right">{right}</div>);
59+
children.push(<div className="lc-workspace-sub-top-area-right lc-sub-top-area-right">{right}</div>);
6060
}
6161
return (
6262
<Fragment>

‎packages/editor-skeleton/src/layouts/theme.less‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,20 @@
3838
--color-field-border-active: @normal-alpha-3;
3939
--color-field-background: @white-alpha-1;
4040

41-
--color-function-success: @brand-success;
42-
--color-function-success-dark: darken(@brand-success, 10%);
43-
--color-function-success-light: lighten(@brand-success, 10%);
44-
--color-function-warning: @brand-warning;
45-
--color-function-warning-dark: darken(@brand-warning, 10%);
46-
--color-function-warning-light: lighten(@brand-warning, 10%);
47-
--color-function-information: @brand-link-hover;
48-
--color-function-information-dark: darken(@brand-link-hover, 10%);
49-
--color-function-information-light: lighten(@brand-link-hover, 10%);
50-
--color-function-error: @brand-danger;
51-
--color-function-error-dark: darken(@brand-danger, 10%);
52-
--color-function-error-light: lighten(@brand-danger, 10%);
53-
--color-function-purple: rgb(144, 94, 190);
54-
--color-function-brown: #7b605b;
41+
--color-success: @brand-success;
42+
--colo-success-dark: darken(@brand-success, 10%);
43+
--color-success-light: lighten(@brand-success, 10%);
44+
--color-warning: @brand-warning;
45+
--color-warning-dark: darken(@brand-warning, 10%);
46+
--color-warning-light: lighten(@brand-warning, 10%);
47+
--color-information: @brand-link-hover;
48+
--color-information-dark: darken(@brand-link-hover, 10%);
49+
--color-information-light: lighten(@brand-link-hover, 10%);
50+
--color-error: @brand-danger;
51+
--color-error-dark: darken(@brand-danger, 10%);
52+
--color-error-light: lighten(@brand-danger, 10%);
53+
--color-purple: rgb(144, 94, 190);
54+
--color-brown: #7b605b;
5555

5656
--color-pane-background: @white-alpha-1;
5757
--color-block-background-normal: @white-alpha-1;
@@ -70,3 +70,21 @@
7070

7171
--pane-title-bg-color: rgba(31,56,88,.04);
7272
}
73+
74+
// @deprecated 变量
75+
:root {
76+
--color-function-success: @brand-success;
77+
--color-function-success-dark: darken(@brand-success, 10%);
78+
--color-function-success-light: lighten(@brand-success, 10%);
79+
--color-function-warning: @brand-warning;
80+
--color-function-warning-dark: darken(@brand-warning, 10%);
81+
--color-function-warning-light: lighten(@brand-warning, 10%);
82+
--color-function-information: @brand-link-hover;
83+
--color-function-information-dark: darken(@brand-link-hover, 10%);
84+
--color-function-information-light: lighten(@brand-link-hover, 10%);
85+
--color-function-error: @brand-danger;
86+
--color-function-error-dark: darken(@brand-danger, 10%);
87+
--color-function-error-light: lighten(@brand-danger, 10%);
88+
--color-function-purple: rgb(144, 94, 190);
89+
--color-function-brown: #7b605b;
90+
}

‎packages/editor-skeleton/src/layouts/top-area.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { observer } from '@alilc/lowcode-editor-core';
44
import { Area } from '../area';
55

66
@observer
7-
export default class TopArea extends Component<{ area: Area; itemClassName?: string }> {
7+
export default class TopArea extends Component<{ area: Area; itemClassName?: string; className?: string }> {
88
render() {
9-
const { area, itemClassName } = this.props;
9+
const { area, itemClassName, className } = this.props;
1010
if (area.isEmpty()) {
1111
return null;
1212
}
1313
return (
14-
<div className={classNames('lc-top-area engine-actionpane', {
14+
<div className={classNames(className, 'lc-top-area engine-actionpane', {
1515
'lc-area-visible': area.visible,
1616
})}
1717
>

‎packages/editor-skeleton/src/layouts/workbench.less‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ body {
141141
flex-direction: column;
142142
background-color: var(--color-background);
143143
}
144-
.lc-top-area, .lc-sub-top-area {
144+
.lc-top-area, .lc-workspace-sub-top-area {
145145
width: 100%;
146146
display: none;
147147
margin-bottom: 2px;
@@ -152,30 +152,34 @@ body {
152152
height: var(--top-area-height);
153153
}
154154

155-
&.lc-sub-top-area {
156-
background-color: var(--color-sub-top-area-background, var(--color-pane-background));
157-
height: var(--sub-top-area-height, var(--top-area-height));
158-
margin: var(--sub-top-area-margin, 0px 0px 2px 0px);
159-
padding: var(--sub-top-area-padding, 8px 12px 8px 16px);
155+
&.lc-workspace-top-area {
156+
background-color: var(--color-workspace-top-area-background, var(--color-pane-background));
157+
}
158+
159+
&.lc-workspace-sub-top-area {
160+
background-color: var(--color-workspace-sub-top-area-background, var(--color-pane-background));
161+
height: var(--workspace-sub-top-area-height, var(--top-area-height));
162+
margin: var(--workspace-sub-top-area-margin, 0px 0px 2px 0px);
163+
padding: var(--workspace-sub-top-area-padding, 8px 12px 8px 16px);
160164
}
161165

162166
&.lc-area-visible {
163167
display: flex;
164168
}
165169

166-
.lc-top-area-left, .lc-sub-top-area-left {
170+
.lc-top-area-left, .lc-workspace-sub-top-area-left {
167171
display: flex;
168172
align-items: center;
169173
max-width: 100%;
170174
}
171175

172-
.lc-top-area-center, .lc-sub-top-area-center {
176+
.lc-top-area-center, .lc-workspace-sub-top-area-center {
173177
flex: 1;
174178
display: flex;
175179
justify-content: center;
176180
margin: 0 8px;
177181
}
178-
.lc-top-area-right, .lc-sub-top-area-right {
182+
.lc-top-area-right, .lc-workspace-sub-top-area-right {
179183
display: flex;
180184
align-items: center;
181185
> * {
@@ -275,9 +279,8 @@ body {
275279
flex-direction: column;
276280
justify-content: space-between;
277281
overflow: hidden;
278-
&.lc-left-area {
279-
background-color: var(--color-left-area-background, var(--color-pane-background));
280-
}
282+
background-color: var(--color-left-area-background, var(--color-pane-background));
283+
281284
&.lc-workspace-left-area {
282285
background-color: var(--color-workspace-left-area-background, var(--color-pane-background));
283286
}

0 commit comments

Comments
 (0)