style: add css themes vars

alibaba · Dec 5, 2023 · 398f069 · 398f069
1 parent 77aea1b
commit 398f069
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/docs/docs/guide/expand/editor/theme.md b/docs/docs/guide/expand/editor/theme.md
@@ -50,7 +50,6 @@ sidebar_position: 9
 - `--color-text-dark`: 文字颜色(dark)
 - `--color-text-light`: 文字颜色(light)
 - `--color-text-reverse`: 反色情况下，文字颜色
-- `--color-text-regular`: 文字颜色(regular)
 - `--color-text-disabled`: 禁用态文字颜色
 
 #### 字段和边框颜色
@@ -109,10 +108,20 @@ sidebar_position: 9
 #### 其他变量
 
 - `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
+- `--top-area-height`: 顶部区域的高度
 - `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
 - `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
 - `--workspace-left-area-width`: 应用级 leftArea width
 - `--left-area-width`: leftArea width
+- `--simulator-top-distance`: simulator 距离容器顶部的距离
+- `--simulator-bottom-distance`:  simulator 距离容器底部的距离
+- `--simulator-left-distance`: simulator 距离容器左边的距离
+- `--simulator-right-distance`: simulator 距离容器右边的距离
+- `--toolbar-padding`: toolbar 的 padding
+- `--toolbar-height`: toolbar 的高度
+- `--pane-title-height`: 面板标题高度
+- `--pane-title-font-size`: 面板标题字体大小
+- `--pane-title-padding`: 面板标题边距
 
 
 

diff --git a/packages/designer/src/builtin-simulator/host.less b/packages/designer/src/builtin-simulator/host.less
@@ -73,10 +73,10 @@
   }
 
   &-device-default {
-    top: 16px;
-    right: 16px;
-    bottom: 16px;
-    left: 16px;
+    top: var(--simulator-top-distance, 16px);
+    right: var(--simulator-right-distance, 16px);
+    bottom: var(--simulator-bottom-distance, 16px);
+    left: var(--simulator-left-distance, 16px);
     width: auto;
     box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125));
   }

diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
@@ -27,7 +27,6 @@
   --color-text-dark: darken(@dark-alpha-3, 10%);
   --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;
@@ -87,4 +86,5 @@
   --color-function-error-light: lighten(@brand-danger, 10%);
   --color-function-purple: rgb(144, 94, 190);
   --color-function-brown: #7b605b;
+  --color-text-regular: @normal-alpha-2;
 }
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
@@ -66,16 +66,16 @@ body {
     }
   }
   > .lc-panel-title {
-    height: 48px;
-    font-size: 16px;
-    padding: 0 15px;
+    height: var(--pane-title-height, 48px);
+    font-size: var(--pane-title-font-size, 16px);
+    padding: var(--pane-title-padding, 0 15px);
     color: var(--color-title, #0f1726);
     font-weight: bold;
   }
 
   .lc-panel-body {
     position: absolute;
-    top: 48px;
+    top: var(--pane-title-height, 48px);
     bottom: 0;
     left: 0;
     right: 0;
@@ -234,7 +234,7 @@ body {
     .lc-pane-icon-close {
       position: absolute;
       right: 16px;
-      top: 14px;
+      top: calc(var(--pane-title-height, 48px) / 2 - 10px);
       height: auto;
       z-index: 2;
       .next-icon {
@@ -247,7 +247,7 @@ body {
     .lc-pane-icon-float {
       position: absolute;
       right: 38px;
-      top: 14px;
+      top: calc(var(--pane-title-height, 48px) / 2 - 10px);
       height: auto;
       z-index: 2;
       svg {
@@ -367,7 +367,7 @@ body {
         display: flex;
         height: var(--toolbar-height);
         background-color: var(--color-toolbar-background, var(--color-pane-background));
-        padding: 8px 16px;
+        padding: var(--toolbar-padding, 8px 16px);
         .lc-toolbar-center {
           display: flex;
           justify-content: center;
@@ -457,7 +457,7 @@ body {
         display: flex;
         height: var(--toolbar-height);
         background-color: var(--color-toolbar-background, var(--color-pane-background));
-        padding: 8px 16px;
+        padding: var(--toolbar-padding, 8px 16px);
         .lc-toolbar-center {
           display: flex;
           justify-content: center;

diff --git a/packages/types/src/shell/type/widget-base-config.ts b/packages/types/src/shell/type/widget-base-config.ts
@@ -15,6 +15,11 @@ export interface IPublicTypeWidgetBaseConfig {
   props?: Record<string, any>;
   content?: any;
   contentProps?: Record<string, any>;
+
+  /**
+   * 优先级，值越小，优先级越高，优先级高的会排在前面
+   */
+  index?: number;
 }
 
 export interface IPublicTypePanelDockConfig extends IPublicTypeWidgetBaseConfig {