Skip to content

Commit acd2fa9

Browse files
wenminewenmine
committed
feat(theme): metaComponent&tutorial css variables change
1 parent 31dce65 commit acd2fa9

File tree

4 files changed

+35
-94
lines changed

4 files changed

+35
-94
lines changed

‎packages/theme/dark/metaComponent.less‎

Lines changed: 16 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,36 @@
11
:root {
22
// MetaListItem
3-
--ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5);
4-
--ti-lowcode-meta-list-item-border-color: transparent;
3+
--ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default);
4+
--ti-lowcode-meta-list-item-border-color: var(--te-common-border-default);
55

6-
--ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
6+
--ti-lowcode-meta-list-top-color: var(--te-common-text-secondary);
77
// MetaJsSlot
8-
--lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);
8+
--lowcode-meta-js-slot-color: var(--te-common-text-secondary);
99

1010
// MetaCodeEditor
11-
--ti-lowcode-meta-codeEditor-color: #d9d9d9;
11+
--ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary);
12+
--ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary);
1213
--ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
13-
--ti-lowcode-meta-codeEditor-hover-color: #fff;
14-
--ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b;
14+
--ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active);
15+
--ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
1516
}
1617

1718
// config-item label popover tips
1819
.prop-label-tips-container {
19-
--ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1);
20-
--ti-lowcode-meta-config-item-label-tips-title-color: #fff;
20+
--ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary);
21+
--ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary);
2122
}
2223

2324
// configItem
2425
.properties-item {
25-
--ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color);
26-
--ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color-1);
27-
--ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0);
28-
--ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
29-
--ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
30-
--ti-lowcode-meta-config-item-active-bg: #fff;
31-
--ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-description-color);
32-
}
33-
34-
// MetaBindVariable
35-
.meta-bind-variable-dialog-box {
36-
--ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color);
37-
--ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1);
38-
--ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color);
39-
--ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color);
40-
--ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color);
41-
--ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(
42-
--ti-lowcode-base-default-button-border-color
43-
);
44-
--ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
45-
--ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1);
46-
--ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
47-
--ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color);
48-
--ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color);
49-
--ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1);
50-
--ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color);
51-
--ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color);
52-
--ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-gray-0);
53-
--ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color);
26+
--ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error);
27+
--ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse);
28+
--ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked);
29+
--ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container);
5430
}
5531

5632
// MetaCodeEditor
5733
.meta-code-editor-dialog-box {
58-
--ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color);
59-
--ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50);
60-
--ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-40);
61-
--ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5);
62-
--ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color);
63-
--ti-lowcode-meta-code-editor-source-code-content-border-color: transparent;
64-
--ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color);
34+
--ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary);
35+
--ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error);
6536
}

‎packages/theme/dark/tutorial.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#tiny-engine-left-panel {
2-
--ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
3-
--ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2);
2+
--ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary);
3+
--ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default);
44
--ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
55
}

‎packages/theme/light/metaComponent.less‎

Lines changed: 15 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,36 @@
11
:root {
22
// MetaListItem
3-
--ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5);
4-
--ti-lowcode-meta-list-item-border-color: rgba(0, 0, 0, 0.08);
3+
--ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default);
4+
--ti-lowcode-meta-list-item-border-color: var(--te-common-border-default);
55
//
6-
--ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
6+
--ti-lowcode-meta-list-top-color: var(--te-common-text-secondary);
77
// MetaJsSlot
8-
--lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);
8+
--lowcode-meta-js-slot-color: var(--te-common-text-secondary);
99

1010
// MetaCodeEditor
11-
--ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color);
12-
--ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color);
11+
--ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary);
12+
--ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary);
1313
--ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
14-
--ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
14+
--ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active);
1515
--ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
1616
}
1717

1818
// config-item label popover tips
1919
.prop-label-tips-container {
20-
--ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1);
21-
--ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-base-text-color);
20+
--ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary);
21+
--ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary);
2222
}
2323

2424
// configItem
2525
.properties-item {
26-
--ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color);
27-
--ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color);
28-
--ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0);
29-
--ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-base-primary-color-2);
30-
31-
--ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-hover-bg-1);
32-
--ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-base-text-color-2);
33-
}
34-
35-
// MetaBindVariable
36-
.meta-bind-variable-dialog-box {
37-
--ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color);
38-
--ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1);
39-
--ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color);
40-
--ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color);
41-
--ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color);
42-
--ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(
43-
--ti-lowcode-base-default-button-border-color
44-
);
45-
--ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
46-
--ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1);
47-
--ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
48-
--ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color);
49-
--ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color);
50-
--ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1);
51-
--ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color);
52-
--ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color);
53-
--ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-text-color);
54-
--ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color);
26+
--ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error);
27+
--ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse);
28+
--ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked);
29+
--ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container);
5530
}
5631

5732
// MetaCodeEditor
5833
.meta-code-editor-dialog-box {
59-
--ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color);
60-
--ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50);
61-
--ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-90);
62-
--ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5);
63-
--ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color);
64-
--ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-base-gray-40);
65-
--ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color);
34+
--ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary);
35+
--ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error);
6636
}

‎packages/theme/light/tutorial.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#tiny-engine-left-panel {
2-
--ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
3-
--ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5);
2+
--ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary);
3+
--ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default);
44
--ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
55
}

0 commit comments

Comments
 (0)