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

feat: add theme color document & optimize some theme colors

Browse Source
This commit is contained in:
liujuping 2023-10-19 11:05:41 +08:00 committed by 林熠
parent 96fe876e33
commit 79b9a6efa5
12 changed files with 165 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/guide/expand/editor/cli.md
View File

@ -1,6 +1,6 @@
---
title: 低代码生态脚手架 & 调试机制
sidebar_position: 8
sidebar_position: 10
---
## 脚手架简述

2
docs/docs/guide/expand/editor/graph.md
View File

@ -1,6 +1,6 @@
---
title: 图编排扩展
sidebar_position: 9
sidebar_position: 8
---
## 项目运行
### 前置准备

2
docs/docs/guide/expand/editor/setter.md
View File

@ -1,6 +1,6 @@
---
title: 设置器扩展
sidebar_position: 5
sidebar_position: 7
---
## 设置器简述

91
docs/docs/guide/expand/editor/theme.md Normal file
View File

@ -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/ 平台进行主题色定制。

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

@ -23,6 +23,6 @@
}
&.invalid {
background-color: var(--color-function-error, red);
background-color: var(--color-error, var(--color-function-error, red));
}
}

4
packages/editor-core/src/widgets/tip/style.less
View File

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

8
packages/editor-skeleton/src/layouts/sub-top-area.tsx
View File

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

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

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

6
packages/editor-skeleton/src/layouts/top-area.tsx
View File

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

27
packages/editor-skeleton/src/layouts/workbench.less
View File

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

26
packages/plugin-outline-pane/src/views/style.less
View File

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

2
packages/workspace/src/layouts/workbench.tsx
View File

@ -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} />