Skip to content

Commit

Permalink
feat: add theme color document & optimize some theme colors
Browse files Browse the repository at this point in the history
  • Loading branch information
liujuping authored and JackLian committed Oct 19, 2023
1 parent 96fe876 commit 79b9a6e
Show file tree
Hide file tree
Showing 12 changed files with 165 additions and 53 deletions.
2 changes: 1 addition & 1 deletion docs/docs/guide/expand/editor/cli.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: 低代码生态脚手架 & 调试机制
sidebar_position: 8
sidebar_position: 10
---
## 脚手架简述

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/guide/expand/editor/graph.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: 图编排扩展
sidebar_position: 9
sidebar_position: 8
---
## 项目运行
### 前置准备
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/guide/expand/editor/setter.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: 设置器扩展
sidebar_position: 5
sidebar_position: 7
---
## 设置器简述

Expand Down
91 changes: 91 additions & 0 deletions docs/docs/guide/expand/editor/theme.md
Original file line number Diff line number Diff line change
@@ -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/ 平台进行主题色定制。
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@
}

&.invalid {
background-color: var(--color-function-error, red);
background-color: var(--color-error, var(--color-function-error, red));
}
}
4 changes: 2 additions & 2 deletions packages/editor-core/src/widgets/tip/style.less
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions packages/editor-skeleton/src/layouts/sub-top-area.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})}
>
Expand Down Expand Up @@ -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>
Expand Down
46 changes: 32 additions & 14 deletions packages/editor-skeleton/src/layouts/theme.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 changes: 3 additions & 3 deletions packages/editor-skeleton/src/layouts/top-area.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})}
>
Expand Down
27 changes: 15 additions & 12 deletions packages/editor-skeleton/src/layouts/workbench.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
> * {
Expand Down Expand Up @@ -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));
}
Expand Down
26 changes: 13 additions & 13 deletions packages/plugin-outline-pane/src/views/style.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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)));
}
}
}
Expand Down Expand Up @@ -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)));
}
}
}
Expand Down
Loading

0 comments on commit 79b9a6e

Please sign in to comment.