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

opentiny · Nov 30, 2024 · 2f16669 · 2f16669
1 parent 2a8d87d
commit 2f16669
Show file tree

Hide file tree

Showing 17 changed files with 54 additions and 48 deletions.
diff --git a/packages/theme/src/anchor/vars.less b/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);
   // 锚点默认文本色

diff --git a/packages/theme/src/base/old-theme.less b/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; // 表格单元格垂直间距基准
 

diff --git a/packages/theme/src/base/vars.less b/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; // 表格单元格垂直间距基准
 

diff --git a/packages/theme/src/calendar-view/index.less b/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;

diff --git a/packages/theme/src/calendar-view/vars.less b/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 文本色、背景色、悬浮色

diff --git a/packages/theme/src/dialog-box/index.less b/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;
     }
   }

diff --git a/packages/theme/src/dialog-box/vars.less b/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);
   // 头部字重

diff --git a/packages/theme/src/drawer/index.less b/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);
       }
     }
   }

diff --git a/packages/theme/src/drawer/vars.less b/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);
   // 抽屉组件圆角

diff --git a/packages/theme/src/form-item/index.less b/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 {

diff --git a/packages/theme/src/form-item/vars.less b/packages/theme/src/form-item/vars.less
@@ -30,25 +30,27 @@
   // 表单项高度
   --tv-FormItem-height: var(--tv-size-height-md);
   // 表单项下侧外边距
-  --tv-FormItem-margin-bottom: 24px;
+  --tv-FormItem-margin-bottom: var(--tv-space-xxl);
+  // 行内表单外边距
+  --tv-FormItem-inline-margin-right: var(--tv-space-xxl);
   // 表单校验块级错误消息上侧内边距
   --tv-FormItem-error-block-padding-top: var(--tv-space-md);
   // -------label相关样式-------
   // 表单输入框左侧文本内边距
-  --tv-FormItem-label-padding-right: 24px;
+  --tv-FormItem-label-padding-right: var(--tv-space-xxl);
   // -------大尺寸表单-------
   // 大尺寸表单项高度
   --tv-FormItem-height-lg: var(--tv-size-height-lg);
   // 大尺寸表单项下侧外边距
-  --tv-FormItem-margin-bottom-lg: 24px;
+  --tv-FormItem-margin-bottom-lg: var(--tv-space-xxl);
   // -------小尺寸表单-------
   // 小尺寸表单项高度
   --tv-FormItem-height-sm: var(--tv-size-height-sm);
   // 小尺寸表单项下侧外边距
-  --tv-FormItem-margin-bottom-sm: 24px;
+  --tv-FormItem-margin-bottom-sm: var(--tv-space-xxl);
   // -------mini尺寸表单-------
   // mini尺寸表单项高度
   --tv-FormItem-height-xs: var(--tv-size-height-xs);
   // mini尺寸表单项下侧外边距
-  --tv-FormItem-margin-bottom-xs: 20px;
+  --tv-FormItem-margin-bottom-xs: var(--tv-space-xl);
 }
diff --git a/packages/theme/src/image-viewer/vars.less b/packages/theme/src/image-viewer/vars.less
@@ -17,11 +17,11 @@
   --tv-ImageViewer-close-bg-color: var(--tv-color-bg-control-unactive);
   --tv-ImageViewer-actions-border-radius: var(--tv-border-radius-round);
   --tv-ImageViewer-actions-height: var(--tv-size-height-lg);
-  --tv-ImageViewer-next-font-size: calc(var(--tv-size-base) * 6);
+  --tv-ImageViewer-next-font-size: 24px;
   --tv-ImageViewer-next-width: var(--tv-size-height-lg);
   --tv-ImageViewer-next-height: var(--tv-size-height-lg);
   --tv-ImageViewer-actions-icon-margin-right: var(--tv-space-xl);
   --tv-ImageViewer-actions-count-font-size: var(--tv-font-size-default);
-  --tv-ImageViewer-prev-left: calc(var(--tv-space-base) * 8);
-  --tv-ImageViewer-next-right: calc(var(--tv-space-base) * 8);
+  --tv-ImageViewer-prev-left: 32px;
+  --tv-ImageViewer-next-right: 32px;
 }
diff --git a/packages/theme/src/link-menu/index.less b/packages/theme/src/link-menu/index.less
@@ -51,10 +51,6 @@
   }
 
   .tiny-dialog-box__wrapper {
-    .tiny-dialog-box__header {
-      padding: 32px 32px 16px;
-    }
-
     .tiny-dialog-box__body {
       .tiny-link-menu__filert {
         .tiny-input {

diff --git a/packages/theme/src/modal/vars.less b/packages/theme/src/modal/vars.less
@@ -40,9 +40,9 @@
 
   // --------------------------------------- header【 status-icon  title  close-icon】
   // 弹窗头部的水平内边距
-  --tv-Modal-box-header-padding-x: 32px;
+  --tv-Modal-box-header-padding-x: var(--tv-space-xxxl);
   // 弹窗头部的上内边距
-  --tv-Modal-box-header-padding-top: 32px;
+  --tv-Modal-box-header-padding-top: var(--tv-space-xxxl);
   // 弹窗头部的下内边距
   --tv-Modal-box-header-padding-bottom: 24px;
 
@@ -73,7 +73,7 @@
   --tv-Modal-box-zoom-icon-right: 48px;
   // -----------------------------------------body
   // 弹窗内容区的水平内边距
-  --tv-Modal-box-body-padding-x: 32px;
+  --tv-Modal-box-body-padding-x: var(--tv-space-xxxl);
   // 弹窗内容区的垂直内边距
   --tv-Modal-box-body-padding-y: 0;
   // 弹窗内容区的消息文本字体大小
@@ -82,13 +82,11 @@
   --tv-Modal-box-body-text-text-color: var(--tv-color-text-secondary);
   // ------------------------------------------footer
   // 弹窗底部的水平内边距
-  --tv-Modal-box-footer-padding-x: 32px;
+  --tv-Modal-box-footer-padding-x: var(--tv-space-xxxl);
   // 弹窗底部的上内边距
   --tv-Modal-box-footer-padding-top: 24px;
   // 弹窗底部的下内边距
-  --tv-Modal-box-footer-padding-bottom: 32px;
-  // 弹窗底部的按钮的最小宽度
-  --tv-Modal-box-footerbtn-min-width: 96px;
+  --tv-Modal-box-footer-padding-bottom: var(--tv-space-xxxl);
 
   // ------------------------------------- 消息场景
   // 消息的背景色

diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less
@@ -79,7 +79,7 @@
   // mini尺寸序号字号
   --tv-Steps-mini-number-font-size: var(--tv-font-size-sm, 12px);
   // small尺寸序号圆圈大小
-  --tv-Steps-icon-small-size: calc(var(--tv-space-base, 4px) * 6);
+  --tv-Steps-icon-small-size: 24px;
   // small尺寸序号字号
   --tv-Steps-small-number-font-size: var(--tv-font-size-default, 14px);
 
@@ -247,9 +247,9 @@
   // 竖式步骤条线条左间距
   --tv-Steps-timeline-vertical-line-margin-left: var(--tv-space-xl, 16px);
   // 竖式步骤条节点内容底部内边距
-  --tv-Steps-timeline-item-padding-bottom: calc(var(--tv-space-base, 4px) * 6);
+  --tv-Steps-timeline-item-padding-bottom: var(--tv-space-xxl);
   // 竖式步骤条圆点尺寸
-  --tv-Steps-timeline-dot-width: calc(var(--tv-size-base, 4px) * 2);
+  --tv-Steps-timeline-dot-width: 8px;
   // 竖式步骤条圆点边框色
   --tv-Steps-timeline-dot-border-color: var(--tv-color-border, #c2c2c2);
   // 竖式步骤条圆点背景色

diff --git a/packages/theme/src/tabs/vars.less b/packages/theme/src/tabs/vars.less
@@ -22,9 +22,9 @@
   // 标签栏边框色
   --tv-Tabs-border-color: var(--tv-color-border-divider, #f0f0f0);
   // 标签栏新增按钮高度
-  --tv-Tabs-new-height: calc(var(--tv-space-base, 4px) * 4.5);
+  --tv-Tabs-new-height: 18px;
   // 标签栏新增按钮宽度
-  --tv-Tabs-new-width: calc(var(--tv-space-base, 4px) * 4.5);
+  --tv-Tabs-new-width: 18px;
   // 标签栏新增按钮填充色
   --tv-Tabs-new-svg-text-color: var(--tv-color-text-weaken, #808080);
   // 标签栏更多文字悬浮文本色
@@ -60,7 +60,7 @@
   // button-card类型small尺寸标签栏字号
   --tv-Tabs-small-button-card-font-size: var(--tv-font-size-sm, 12px);
   // card类型small尺寸标签项右外边距(new)
-  --tv-Tabs-small-item-margin-right: calc(var(--tv-space-base, 4px) * 6);
+  --tv-Tabs-small-item-margin-right: 24px;
   // card类型small尺寸标签项水平内边距(new)
   --tv-Tabs-small-separator-padding-horizontal: var(--tv-space-lg, 12px);
   // card类型small尺寸标签项字号(new)
@@ -84,15 +84,15 @@
   // bordercard类型非选中项文本色
   --tv-Tabs-dark-text-color: var(--tv-color-text-disabled, #c2c2c2);
   // bordercard类型标签项上外边距
-  --tv-Tabs-dark-margin-top: calc(var(--tv-space-base, 4px) + 1px);
+  --tv-Tabs-dark-margin-top: 5px;
   // bordercard类型首个标签项左外边距
   --tv-Tabs-dark-first-margin-left: 20px;
   // bordercard类型标签栏边框厚度
   --tv-Tabs-dark-border-weight: 0px;
   // bordercard类型默认背景色
   --tv-Tabs-header-dark-bg-color: var(--tv-color-bg-dark, #191919);
   // bordercard类型标签项高度
-  --tv-Tabs-dark-item-height: calc(var(--tv-size-base, 4px) * 11.75);
+  --tv-Tabs-dark-item-height: 47px;
   // 标签项超出时上下按钮尺寸
   --tv-Tabs-prev-next-btn-icon-size: var(--tv-font-size-default, 14px);
   // 标签项默认右外边距
@@ -136,15 +136,15 @@
   // 头部更多按钮水平内边距
   --tv-Tabs-more-icon-padding-horizontal: 13.5px;
   // 头部更多图标盒子高度
-  --tv-Tabs-more-icon-height: calc(var(--tv-size-base, 4px) * 13);
+  --tv-Tabs-more-icon-height: 52px;
   // 头部更多图标尺寸
   --tv-Tabs-more-icon-size: var(--tv-font-size-heading-xs, 16px);
   // 头部更多按钮左侧盒子阴影高度
-  --tv-Tabs-more-left-box-height: calc(var(--tv-size-base, 4px) * 13);
+  --tv-Tabs-more-left-box-height: 52px;
   // 内容垂直外边距
   --tv-Tabs-content-margin-vertical: var(--tv-space-lg, 12px);
   // 内容水平外边距
-  --tv-Tabs-content-margin-horizontal: 0px;
+  --tv-Tabs-content-margin-horizontal: 0;
   // buttoncard类型标签栏背景色
   --tv-Tabs-button-card-nav-bg-color: var(--tv-color-bg, #f5f5f5);
   // buttoncard类型选项文本色

diff --git a/packages/theme/src/wizard/vars.less b/packages/theme/src/wizard/vars.less
@@ -60,7 +60,7 @@
   // 节点标题上外边距
   --tv-Wizard-node-title-margin-top: var(--tv-space-md, 8px);
   // 页向导模式按钮组上外边距
-  --tv-Wizard-button-group-margin-top: calc(var(--tv-space-base, 4px) * 9);
+  --tv-Wizard-button-group-margin-top: 36px;
   // 页向导模式按钮左外边距
   --tv-Wizard-button-margin-left: var(--tv-space-lg, 12px);
   // 垂直模式线条宽度