feat: add space var to adapt to old theme (#2581)

Author: gimmyhehe

packages/theme/src/anchor/vars.less

@@ -12,7 +12,7 @@
 
 .inject-anchor-vars() {
   // 组件宽度
-  --tv-Anchor-width: calc(var(--tv-size-base, 4px) * 40);
+  --tv-Anchor-width: 160px;
   // 组件默认背景色
   --tv-Anchor-bg-color: var(--tv-color-bg-secondary, #fff);
   // 锚点默认文本色

packages/theme/src/base/old-theme.less

@@ -412,6 +412,8 @@
   --tv-space-md: calc(var(--tv-space-base) * 2);
   --tv-space-lg: calc(var(--tv-space-base) * 3);
   --tv-space-xl: calc(var(--tv-space-base) * 4);
+  --tv-space-xxl: calc(var(--tv-space-base) * 5); // 内容块之间的间距
+  --tv-space-xxxl: calc(var(--tv-space-base) * 8); // 容器与容器内容的间距
   --tv-space-table-x: 2px; // 表格单元格水平间距基准
   --tv-space-table-y: 1px; // 表格单元格垂直间距基准
 

packages/theme/src/base/vars.less

@@ -413,6 +413,8 @@
   --tv-space-md: calc(var(--tv-space-base) * 2);
   --tv-space-lg: calc(var(--tv-space-base) * 3);
   --tv-space-xl: calc(var(--tv-space-base) * 4);
+  --tv-space-xxl: calc(var(--tv-space-base) * 6); // 内容块之间的间距
+  --tv-space-xxxl: calc(var(--tv-space-base) * 8); // 容器与容器内容的间距
   --tv-space-table-x: 4px; // 表格单元格水平间距基准
   --tv-space-table-y: 4px; // 表格单元格垂直间距基准
 

packages/theme/src/calendar-view/index.less

@@ -20,7 +20,7 @@
   .inject-CalendarView-vars();
   width: 100%;
   height: auto;
-  padding-top: 32px;
+  padding-top: var(--tv-CalendarView-padding);
   border: 1px solid #ebebeb;
   background-color: var(--tv-CalendarView-bg-color);
   overflow: auto;
@@ -30,7 +30,7 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 18px;
-    padding: 0 32px;
+    padding: 0 var(--tv-CalendarView-padding);
   }
   &__header div:first-child {
     flex-grow: 1;

packages/theme/src/calendar-view/vars.less

@@ -13,6 +13,8 @@
 .inject-CalendarView-vars() {
   // 视图容器、背景色
   --tv-CalendarView-bg-color: var(--tv-color-bg-secondary);
+  // 日历容器与内容的间距
+  --tv-CalendarView-padding: var(--tv-space-xxxl);
   // picker右边距
   --tv-CalendarView-picker-right-bottom: var(--tv-space-md);
   // radio 文本色、背景色、悬浮色

packages/theme/src/dialog-box/index.less

@@ -59,7 +59,7 @@
   }
 
   & &__header {
-    padding: 32px 32px 24px;
+    padding: var(--tv-DialogBox-padding) var(--tv-DialogBox-padding) 24px;
     background: var(--tv-DialogBox-bg-color);
     font-weight: var(--tv-DialogBox-head-title-font-weight);
     display: flex;
@@ -116,7 +116,7 @@
 
   & &__body {
     text-align: left;
-    padding: 0 32px;
+    padding: 0 var(--tv-DialogBox-padding);
     color: var(--tv-DialogBox-body-text-color);
     font-size: var(--tv-DialogBox-body-font-size);
 
@@ -135,7 +135,7 @@
   }
 
   & &__footer {
-    padding: 24px 32px 32px;
+    padding: 24px var(--tv-DialogBox-padding) var(--tv-DialogBox-padding);
     text-align: right;
     box-sizing: border-box;
 
@@ -162,12 +162,12 @@
     .@{dialog-box-prefix-cls}__header,
     .@{dialog-box-prefix-cls}__footer {
       width: calc(100% - 64px);
-      margin-left: 32px;
-      margin-right: 32px;
+      margin-left: var(--tv-DialogBox-padding);
+      margin-right: var(--tv-DialogBox-padding);
     }
 
     .@{dialog-box-prefix-cls}__header {
-      padding: 32px 0 20px;
+      padding: var(--tv-DialogBox-padding) 0 24px;
       border-bottom: 1px solid var(--tv-DialogBox-head-divider-border-color);
 
       &btn {
@@ -180,11 +180,11 @@
       overflow: auto;
       color: var(--tv-DialogBox-drawer-body-color);
       border-bottom: 1px solid var(--tv-DialogBox-drawer-divider-border-color);
-      padding: 0 32px;
+      padding: 0 var(--tv-DialogBox-padding);
     }
 
     .@{dialog-box-prefix-cls}__footer {
-      padding: 24px 0 32px;
+      padding: 24px 0 var(--tv-DialogBox-padding);
       text-align: right;
     }
   }

packages/theme/src/dialog-box/vars.less

@@ -17,6 +17,8 @@
   --tv-DialogBox-border-radius: var(--tv-border-radius-lg);
   // 对话框阴影
   --tv-DialogBox-shadow: var(--tv-shadow-4-down);
+  // 弹窗容器与内容间距
+  --tv-DialogBox-padding: var(--tv-space-xxxl);
   // 头部字号
   --tv-DialogBox-head-title-font-size: var(--tv-font-size-heading-md);
   // 头部字重

packages/theme/src/drawer/index.less

@@ -120,8 +120,8 @@
 
       .@{drawer-prefix-cls}__header,
       .@{drawer-prefix-cls}__footer {
-        margin-left: 32px;
-        margin-right: 32px;
+        margin-left: var(--tv-Drawer-padding);
+        margin-right: var(--tv-Drawer-padding);
       }
 
       .@{drawer-prefix-cls}__header-wrapper {
@@ -155,7 +155,7 @@
         }
 
         .@{drawer-prefix-cls}__header {
-          padding: 32px 0 24px;
+          padding: var(--tv-Drawer-padding) 0 24px;
           background: var(--tv-Drawer-bg-color);
           display: flex;
           justify-content: space-between;
@@ -197,7 +197,7 @@
       .@{drawer-prefix-cls}__body {
         flex: auto;
         overflow: auto;
-        padding: 0 32px;
+        padding: 0 var(--tv-Drawer-padding);
         border-bottom: 1px solid var(--tv-Drawer-divider-body-border-color);
       }
 
@@ -206,7 +206,7 @@
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        padding: 24px 0 32px;
+        padding: 24px 0 var(--tv-Drawer-padding);
       }
     }
   }

packages/theme/src/drawer/vars.less

@@ -17,6 +17,8 @@
   --tv-Drawer-max-width: 1000px;
   // 背景色
   --tv-Drawer-bg-color: var(--tv-color-bg-secondary);
+  // 抽屉容器与内容间距
+  --tv-Drawer-padding: var(--tv-space-xxxl);
   // 内容底部边框色
   --tv-Drawer-divider-body-border-color: var(--tv-color-border-divider);
   // 抽屉组件圆角

packages/theme/src/form-item/index.less

@@ -273,7 +273,7 @@
     .@{form-item-prefix-cls} {
       display: inline-block;
       vertical-align: top;
-      margin-right: 24px;
+      margin-right: var(--tv-FormItem-inline-margin-right);
     }
 
     .@{form-item-prefix-cls}__label {