feat: add base vars

opentiny · Feb 14, 2025 · 52f330b · 52f330b
1 parent c8bf600
commit 52f330b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -107,11 +107,14 @@ export default {
     box-sizing: border-box;
   }
   .modal-padding {
-    padding: 14px 20px;
+    padding: var(--te-styles-modal-padding-y) var(--te-styles-modal-padding-x);
   }
   .align-body {
-    right: 280px;
-    left: calc(100% - 287px - 280px - 16px);
+    right: var(--te-styles-modal-right-offset-1);
+    left: calc(
+      100% - var(--te-styles-modal-right-offset-1) - var(--te-styles-modal-right-offset-2) -
+        var(--te-styles-modal-spacing)
+    );
   }
 }
 </style>
diff --git a/packages/settings/styles/src/styles/vars.less b/packages/settings/styles/src/styles/vars.less
@@ -68,4 +68,10 @@
   // 样式面板-文本
   --te-styles-typography-bg-color: var(--te-common-bg-container);
   --te-styles-typography-bg-color-hover: var(--te-common-bg-gray-hover);
+
+  --te-styles-modal-padding-y: var(--te-base-modal-padding-y);
+  --te-styles-modal-padding-x: var(--te-base-modal-padding-x);
+  --te-styles-modal-right-offset-1: var(--te-base-modal-offset-1);
+  --te-styles-modal-right-offset-2: var(--te-base-modal-offset-2);
+  --te-styles-modal-spacing: var(--te-base-space-16);
 }
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
@@ -280,6 +280,7 @@
   --te-base-space-2: 2px; // 下拉面板距离上部输入框的间距
   --te-base-space-6: 6px; // 其他间距-3
   --te-base-space-10: 10px; // 其他间距-4
+  --te-base-space-16: 16px;
 
   /**
    * 1.3 字号
@@ -322,4 +323,8 @@
   * 基础配置
   **/
   --te-base-min-width: 1280px;
+  --te-base-modal-offset-1: 287px;
+  --te-base-modal-offset-2: 280px;
+  --te-base-modal-padding-y: 14px;
+  --te-base-modal-padding-x: 20px;
 }