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 style varibles and update some styles

Browse Source
This commit is contained in:
liujuping 2023-10-07 17:00:45 +08:00 committed by 林熠
parent f50410ae7a
commit fc31145f89
17 changed files with 81 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@
}
& > &-status {
margin-left: 5px;
color: #3c3c3c;
color: var(--color-text, #3c3c3c);
transform: translateY(-100%);
font-weight: lighter;
}
@ -46,7 +46,7 @@
opacity: 1;
max-height: 100%;
overflow: hidden;
color: white;
color: var(--color-icon-reverse, white);
&:hover {
background: var(--color-brand-light, #006cff);
}
@ -56,8 +56,8 @@
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #197aff;
background: #fff;
border: 1px solid var(--color-brand, #197aff);
background: var(--color-block-background-normal, #fff);
pointer-events: auto;
z-index: 2;
}
@ -73,11 +73,9 @@
&:after {
content: "";
display: block;
border: 1px solid #197aff;
background: #fff;
// background: #738397;
border: 1px solid var(--color-brand, #197aff);
background: var(--color-block-background-normal, #fff);
border-radius: 2px;
// animation: flashing 1.5s infinite linear;
}
&.e,
@ -85,7 +83,6 @@
cursor: ew-resize;
&:after {
width: 4px;
// height: calc(100% - 20px);
min-height: 50%;
}
}
@ -94,62 +91,24 @@
&.s {
cursor: ns-resize;
&:after {
// width: calc(100% - 20px);
min-width: 50%;
height: 4px;
}
}
}
// &&-hovering {
&&-detecting {
z-index: 1;
border-style: dashed;
background: rgba(0,121,242,.04);
&.x-loop {
border-color: rgba(138, 93, 226, 0.8);
background: rgba(138, 93, 226, 0.04);
>.@{scope}-title {
color: rgba(138, 93, 226, 1.0);
}
}
&.x-condition {
border-color: rgba(255, 99, 8, 0.8);
background: rgba(255, 99, 8, 0.04);
>.@{scope}-title {
color: rgb(255, 99, 8);
}
}
background: var(--color-block-background-light, rgba(0,121,242,.04));
}
&&-selecting {
z-index: 2;
border-width: 2px;
&.x-loop {
border-color: rgba(147, 112, 219, 1.0);
background: rgba(147, 112, 219, 0.04);
>@{scope}-title {
color: rgba(147, 112, 219, 1.0);
}
&.highlight {
background: transparent;
}
}
&.x-condition {
border-color: rgb(255, 99, 8);
>@{scope}-title {
color: rgb(255, 99, 8);
}
}
&.dragging {
background: rgba(182, 178, 178, 0.8);
background: var(--color-layer-mask-background, rgba(182, 178, 178, 0.8));
border: none;
}
}

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

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

6
packages/designer/src/builtin-simulator/host.less
View File

@ -31,7 +31,7 @@
max-height: calc(100% - 32px);
max-width: calc(100% - 32px);
transform: translateX(-50%);
box-shadow: 0 2px 10px 0 rgba(31,56,88,.15);
box-shadow: 0 2px 10px 0 var(--color-block-background-shallow, rgba(31,56,88,.15));
}
&-device-iphonex { // 增加默认的小程序的壳
@ -44,7 +44,7 @@
background: url(https://img.alicdn.com/tfs/TB1b4DHilFR4u4jSZFPXXanzFXa-750-1574.png) no-repeat top;
background-size: 375px 812px;
border-radius: 44px;
box-shadow: rgba(0, 0, 0, 0.1) 0 36px 42px;
box-shadow: var(--color-block-background-shallow, rgba(0, 0, 0, 0.1)) 0 36px 42px;
.@{scope}-canvas-viewport {
width: auto;
top: 50px;
@ -78,7 +78,7 @@
bottom: 16px;
left: 16px;
width: auto;
box-shadow: 0 1px 4px 0 rgba(31, 50, 88, 0.125);
box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125));
}
&-content {

2
packages/designer/src/builtin-simulator/node-selector/index.less
View File

@ -48,7 +48,7 @@
margin-top: 2px;
&-content {
padding-left: 6px;
background: #78869a;
background: var(--color-layer-tooltip-background, #78869a);
display: inline-flex;
border-radius: 3px;
align-items: center;

4
packages/designer/src/designer/drag-ghost/ghost.less
View File

@ -7,8 +7,8 @@
flex-direction: column;
align-items: center;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 6px grey;
background-color: var(--color-block-background-deep-dark, rgba(0, 0, 0, 0.4));
box-shadow: 0 0 6px var(--color-block-background-shallow, grey);
transform: translate(-10%, -50%);
.lc-ghost {
.lc-ghost-title {

8
packages/designer/src/less-variables.less
View File

@ -99,19 +99,19 @@
@brand-link-hover: #2e76a6;
// F1-1-7 A10
@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
// F1-1-8 A6
@brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
// F2-1-2 A80
@brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
// F2-1-7 A10
@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
// F3-1-2 A80
@brand-success-alpha-2: rgba(102, 188, 92, 0.8);
// F3-1-7 A10
@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
// F4-1-7 A10
@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
// 文本色
@text-primary-color: @dark-alpha-3;

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

@ -156,7 +156,7 @@
opacity: 0;
border-radius: 3px;
padding: 6px 8px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
text-shadow: 0 -1px var(--color-field-label, rgba(0, 0, 0, 0.3));
font-size: var(--font-size-text);
line-height: 14px;
max-width: 200px;
@ -178,19 +178,19 @@
height: 8px;
&:after {
border: 6px solid transparent;
border-top-color: rgba(0, 0, 0, 0.7);
border-top-color: var(--color-layer-tooltip-background, rgba(0, 0, 0, 0.7));
}
}
&.lc-theme-black {
background: rgba(0, 0, 0, 0.7);
background: var(--color-icon-pane, rgba(0, 0, 0, 0.7));
.lc-arrow:after {
border-top-color: rgba(0, 0, 0, 0.7);
border-top-color: var(--color-layer-tooltip-background, rgba(0, 0, 0, 0.7));
}
}
&.lc-theme-green {
background: #57a672;
background: var(--color-function-success-dark, #57a672);
.lc-arrow:after {
border-top-color: #57a672;
border-top-color: var(--color-function-success-dark, #57a672);
}
}
&.lc-visible {

2
packages/editor-core/src/widgets/title/title.less
View File

@ -21,7 +21,7 @@
cursor: help;
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: rgba(31, 56, 88, .3);
text-decoration-color: var(--color-text-light, rgba(31, 56, 88, .3));
}
line-height: initial !important;
word-break: break-all;

34
packages/editor-skeleton/src/components/field/fields.tsx
View File

@ -203,40 +203,6 @@ export class Field extends Component<FieldProps> {
*/
function createValueState(/* valueState?: number, onClear?: (e: React.MouseEvent) => void */) {
return null;
/*
let tip: any = null;
let className = 'lc-valuestate';
let icon: any = null;
if (valueState) {
if (valueState < 0) {
// multiple value 橘黄色点： tip：多种值，点击清除
tip = intlNode('Multiple Value, Click to Clear');
className += ' valuestate-multiple';
icon = <IconClear size={6} />;
} else if (valueState === 10) {
// isset orangered tip: 必填项
tip = intlNode('Required');
className += ' valuestate-required';
onClear = undefined;
} else if (valueState > 0) {
// isset 蓝点 tip: 已设置值，点击清除
tip = intlNode('Setted Value, Click to Clear');
className += ' valuestate-isset';
icon = <IconClear size={6} />;
}
} else {
onClear = undefined;
// unset 占位空间
}
return (
<i className={className} onClick={onClear}>
{icon}
{tip && <Tip>{tip}</Tip>}
</i>
);
*/
}
export interface PopupFieldProps extends FieldProps {

117
packages/editor-skeleton/src/components/field/index.less
View File

@ -14,54 +14,6 @@
.lc-field-title {
display: flex;
align-items: center;
.lc-valuestate {
height: 6px;
width: 6px;
min-width: 6px;
border-radius: 100%;
margin-right: 2px;
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
> svg {
display: none;
}
&.valuestate-multiple {
background-color: rgb(232, 145, 83);
pointer-events: auto;
&:hover {
background-color: rgb(223, 139, 30);
cursor: pointer;
transform: scale(2);
transform-origin: center;
> svg {
display: block;
}
}
}
&.valuestate-isset {
background-color: rgba(124, 177, 238, 0.6);
pointer-events: auto;
&:hover {
background-color: rgb(45, 126, 219);
cursor: pointer;
transform: scale(2);
transform-origin: center;
> svg {
display: block;
}
}
}
&.valuestate-required {
background-color: rgb(250, 82, 76);
pointer-events: auto;
&:hover {
background-color: rgb(224, 46, 40);
}
}
}
}
.lc-field-icon {
transform-origin: center;
@ -92,11 +44,7 @@
&.lc-block-field, &.lc-accordion-field, &.lc-entry-field {
display: block;
&:first-child {
> .lc-field-head {
// border-top: none;
}
}
> .lc-field-head {
height: 32px;
display: flex;
@ -110,7 +58,7 @@
user-select: none;
> .lc-field-icon {
color: #8f9bb3;
color: var(--color-icon-normal, #8f9bb3);
}
}
@ -128,10 +76,6 @@
}
}
}
// + .lc-inline-field {
// border-top: 1px solid var(--color-line-normal);
// }
}
&.lc-entry-field {
@ -163,15 +107,11 @@
> .lc-field-head {
cursor: pointer;
}
&.lc-field-is-collapsed {
margin-bottom: 6px;
}
// collapsed
// &:last-child.lc-field-is-collapsed{
// border-bottom: 1px solid var(--color-line-normal);
// }
&.lc-field-is-collapsed {
> .lc-field-head .lc-field-icon {
transform: rotate(180deg);
@ -180,56 +120,5 @@
display: none;
}
}
// 邻近的保持上下距离
+ .lc-field {
// margin-top: @y-gap;
}
}
// 2rd level reset
.lc-field-body {
// .lc-inline-field {
// &:first-child {
// padding-top: 0;
// }
// + .lc-accordion-field, +.lc-block-field {
// margin-top: @y-gap;
// }
// }
// .lc-field {
// border-top: none !important;
// }
// .lc-accordion-field, .lc-block-field {
// > .lc-field-head {
// padding-left: @x-gap;
// background: var(--color-block-background-light);
// border-bottom: none;
// border-top: none;
// > .lc-field-icon {
// // margin-right: @x-gap/2;
// margin-right: 0;
// }
// }
// > .lc-field-body {
// padding: 8px;
// }
// }
// 3rd level field title width should short
// .lc-field-body .lc-inline-field {
// > .lc-field-head {
// width: 50px;
// .lc-title-label {
// width: 50px;
// }
// }
// }
// >.lc-block-setter {
// flex: 1;
// }
}
}

8
packages/editor-skeleton/src/components/settings/style.less
View File

@ -33,14 +33,6 @@
position: relative;
margin-bottom: 4px;
position: absolute;
.lc-setting-stage-back-icon {
position: absolute;
left: 8px;
top: 8px;
color: #8f9bb3;
cursor: pointer;
}
}
.lc-settings-notice {

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

@ -16,6 +16,7 @@
--color-icon-hover: @normal-alpha-3;
--color-icon-active: @brand-color-1;
--color-icon-reverse: @white-alpha-1;
--color-icon-disabled: @normal-alpha-6;
--color-icon-pane: @dark-alpha-3;
--color-line-normal: @normal-alpha-7;
@ -27,6 +28,7 @@
--color-text-light: lighten(@dark-alpha-3, 10%);
--color-text-reverse: @white-alpha-2;
--color-text-regular: @normal-alpha-2;
--color-text-disabled: @gray-light;
--color-field-label: @dark-alpha-4;
--color-field-text: @dark-alpha-3;
@ -48,6 +50,8 @@
--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-pane-background: @white-alpha-1;
--color-block-background-normal: @white-alpha-1;
@ -55,6 +59,10 @@
--color-block-background-shallow: @normal-alpha-8;
--color-block-background-dark: @normal-alpha-7;
--color-block-background-disabled: @normal-alpha-6;
--color-block-background-active: @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;
--color-block-background-deep-dark: @normal-5;
--color-layer-mask-background: @dark-alpha-7;
--color-layer-tooltip-background: rgba(44,47,51,0.8);

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

@ -60,7 +60,7 @@ body {
.lc-help-tip {
margin-left: 4px;
color: rgba(0, 0, 0, 0.4);
color: var(--color-icon-normal, rgba(0, 0, 0, 0.4));
cursor: pointer;
}
}
@ -68,7 +68,7 @@ body {
height: 48px;
font-size: 16px;
padding: 0 15px;
color: #0f1726;
color: var(--color-title, #0f1726);
font-weight: bold;
}
@ -79,39 +79,6 @@ body {
left: 0;
right: 0;
overflow: visible;
/*
.my-tabs {
width: 100%;
height: 100%;
position: relative;
.tabs-title {
display: flex;
height: var(--pane-title-height);
> .tab-title {
cursor: pointer;
padding: 0;
flex: 1;
min-width: 0;
justify-content: center;
border-bottom: 2px solid transparent;
&.actived {
cursor: default;
color: var(--color-text-avtived);
border-bottom-color: #3896ee;
}
}
}
.tabs-content {
position: absolute;
top: var(--pane-title-height);
bottom: 0;
left: 0;
right: 0;
height: calc(100% - var(--pane-title-height));
overflow: hidden;
}
}
*/
}
.lc-outline-tree-container {
border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
@ -234,8 +201,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
// background: rgba(31,56,88,0.04);
border-bottom: 1px solid #edeff3;
border-bottom: 1px solid var(--color-line-normal, #edeff3);
.lc-tab-title {
flex: 1;
height: 32px;
@ -246,8 +212,8 @@ body {
cursor: pointer;
font-size: 12px;
&.actived {
color: #0079f2;
border-bottom-color: #0079f2;
color: var(--color-brand, #0079f2);
border-bottom-color: var(--color-brand, #0079f2);
}
}
}
@ -293,7 +259,7 @@ body {
// min-width: var(--dock-fixed-pane-width);
left: calc(var(--left-area-width) + 1px);
background-color: var(--color-left-float-pane-background, var(--color-pane-background));
box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
box-shadow: 4px 6px 6px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.08));
z-index: 820;
display: none;
// padding-top: 36px;
@ -340,7 +306,7 @@ body {
cursor: pointer;
}
&.actived {
color: #0079f2;
color: var(--color-brand, #0079f2);
}
&.disabled {
opacity: 0.4;

8
packages/editor-skeleton/src/less-variables.less
View File

@ -99,19 +99,19 @@
@brand-link-hover: #2e76a6;
// F1-1-7 A10
@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
// F1-1-8 A6
@brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
// F2-1-2 A80
@brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
// F2-1-7 A10
@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
// F3-1-2 A80
@brand-success-alpha-2: rgba(102, 188, 92, 0.8);
// F3-1-7 A10
@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
// F4-1-7 A10
@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
// 文本色
@text-primary-color: @dark-alpha-3;

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

@ -54,17 +54,17 @@
.tree-node-modal {
margin: 5px;
border: 1px solid rgba(31, 56, 88, 0.2);
border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.2));
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15);
box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 56, 88, 0.15));
.tree-node-modal-title {
position: relative;
background: rgba(31, 56, 88, 0.04);
background: var(--color-block-background-light, rgba(31, 56, 88, 0.04));
padding: 0 10px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid rgba(31, 56, 88, 0.2);
border-bottom: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.2));
.tree-node-modal-title-visible-icon {
position: absolute;
@ -89,7 +89,7 @@
left: 6px;
}
.tree-node-modal-radio-active {
color: #006cff;
color: var(--color-brand, #006cff);
}
}
@ -108,7 +108,7 @@
&:hover {
.tree-node-branches::before {
border-left-color: #ddd;
border-left-color: var(--color-line-darken, #ddd);
}
}
@ -120,20 +120,20 @@
transform: translateZ(0);
transition: all 0.2s ease-in-out;
&.invalid {
border-color: red;
background-color: rgba(240, 154, 154, 0.719);
border-color: 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 #7b605b;
border-bottom: 1px solid var(--color-function-brown, #7b605b);
position: relative;
&:before {
position: absolute;
display: block;
width: 0;
border-left: 0.5px solid #7b605b;
border-left: 0.5px solid var(--color-function-brown, #7b605b);
height: 100%;
top: 0;
left: 0;
@ -142,26 +142,26 @@
}
> .condition-group-title {
text-align: center;
background-color: #7b605b;
background-color: var(--color-function-brown, #7b605b);
height: 14px;
> .lc-title {
font-size: 12px;
transform: scale(0.8);
transform-origin: top;
color: white;
text-shadow: 0 0 2px black;
color: var(--color-text-reverse, white);
text-shadow: 0 0 2px var(--color-block-background-shallow, black);
display: block;
}
}
}
.tree-node-slots {
border-bottom: 1px solid rgb(144, 94, 190);
border-bottom: 1px solid var(--color-function-purple, rgb(144, 94, 190));
position: relative;
&::before {
position: absolute;
display: block;
width: 0;
border-left: 0.5px solid rgb(144, 94, 190);
border-left: 0.5px solid var(--color-function-purple, rgb(144, 94, 190));
height: 100%;
top: 0;
left: 0;
@ -170,25 +170,25 @@
}
> .tree-node-slots-title {
text-align: center;
background-color: rgb(144, 94, 190);
background-color: var(--color-function-purple, rgb(144, 94, 190));
height: 14px;
> .lc-title {
font-size: 12px;
transform: scale(0.8);
transform-origin: top;
color: white;
color: var(--color-text-reverse, white);
text-shadow: 0 0 2px black;
display: block;
}
}
&.insertion-at-slots {
padding-bottom: @treeNodeHeight;
border-bottom-color: rgb(182, 55, 55);
border-bottom-color: var(--color-function-error-dark, rgb(182, 55, 55));
> .tree-node-slots-title {
background-color: rgb(182, 55, 55);
background-color: var(--color-function-error-dark, rgb(182, 55, 55));
}
&::before {
border-left-color: rgb(182, 55, 55);
border-left-color: var(--color-function-error-dark, rgb(182, 55, 55));
}
}
}
@ -326,13 +326,13 @@
align-items: center;
line-height: 0;
&.cond {
color: rgb(179, 52, 6);
color: var(--color-function-error, rgb(179, 52, 6));
}
&.loop {
color: rgb(103, 187, 187);
color: var(--color-function-success, rgb(103, 187, 187));
}
&.slot {
color: rgb(211, 90, 211);
color: var(--color-function-purple, rgb(211, 90, 211));
}
}
}
@ -366,7 +366,7 @@
&.hidden {
.tree-node-title-label {
color: #9b9b9b;
color: var(--color-text-disabled, #9b9b9b);
}
& > .tree-node-title > .tree-node-hide-btn {
opacity: 0.8;

6
packages/utils/src/create-icon.tsx
View File

@ -18,7 +18,11 @@ export function createIcon(
}
if (typeof icon === 'string') {
if (URL_RE.test(icon)) {
return <img src={icon} {...props} />;
return createElement('img', {
src: icon,
class: props?.className,
...props,
});
}
return <Icon type={icon} {...props} />;
}

8
packages/workspace/src/less-variables.less
View File

@ -99,19 +99,19 @@
@brand-link-hover: #2e76a6;
// F1-1-7 A10
@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
// F1-1-8 A6
@brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
// F2-1-2 A80
@brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
// F2-1-7 A10
@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
// F3-1-2 A80
@brand-success-alpha-2: rgba(102, 188, 92, 0.8);
// F3-1-7 A10
@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
// F4-1-7 A10
@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
// 文本色
@text-primary-color: @dark-alpha-3;