Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Nov 30, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/theme/src/anchor/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

.inject-anchor-vars() {
// 组件宽度
--tv-Anchor-width: calc(var(--tv-size-base, 4px) * 40);
--tv-Anchor-width: 160px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Consider maintaining calculated width for consistency

The codebase shows consistent usage of calculated widths based on --tv-size-base across multiple components:

  • Steps component uses it for heights and icon sizes
  • Milestone component for node size and flag dimensions
  • Card component for different width variants (large, medium, small, mini)

Replacing the calculated width with a fixed value in the Anchor component deviates from this pattern and could impact:

  • Design system consistency
  • Component scalability with the base unit
  • Maintainability when base unit changes

Consider reverting to calc(var(--tv-size-base, 4px) * 40) to maintain consistency with the design system.

🔗 Analysis chain

Consider maintaining flexibility with calculated values

Replacing calc(var(--tv-size-base, 4px) * 40) with a fixed 160px reduces the component's flexibility. While this might help compatibility with an old theme, it could impact:

  • Responsiveness across different screen sizes
  • Accessibility for users with custom zoom levels
  • Consistency with the design system's base unit scaling

Let's check if other components still use calculated widths:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other calculated widths using tv-size-base
rg "calc\(.*--tv-size-base.*\)" packages/theme/src/

Length of output: 18147

// 组件默认背景色
--tv-Anchor-bg-color: var(--tv-color-bg-secondary, #fff);
// 锚点默认文本色
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/base/old-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,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); // 容器与容器内容的间距
Comment on lines +414 to +415
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Consider replacing hardcoded spacing values with new CSS variables

The verification reveals:

  • The new spacing variables (--tv-space-xxl and --tv-space-xxxl) are already being used consistently in several components like Modal, Drawer, Form, and Calendar.
  • However, there are numerous instances of hardcoded values that match these new spacing variables:
    • Multiple occurrences of 20px (equivalent to --tv-space-xxl) in components like Input, Grid, Popover
    • Several instances of 32px (equivalent to --tv-space-xxxl) in components like Button, Card, Nav Menu

To maintain consistency, consider:

  • Replace 20px with var(--tv-space-xxl) where appropriate
  • Replace 32px with var(--tv-space-xxxl) where appropriate
🔗 Analysis chain

Verify consistent usage of new spacing variables.

Let's ensure these new spacing variables are being used consistently across components.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any existing usage of these new spacing variables
rg "var\(--tv-space-xx+l\)" --type css --type less

# Check for any hardcoded values that might need to be replaced with these variables
rg "(margin|padding).+?(?:20px|32px)" --type css --type less

Length of output: 8021

--tv-space-table-x: 2px; // 表格单元格水平间距基准
--tv-space-table-y: 1px; // 表格单元格垂直间距基准

Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) * 6); // 内容块之间的间距
--tv-space-xxxl: calc(var(--tv-space-base) * 8); // 容器与容器内容的间距
--tv-space-table-x: 4px; // 表格单元格水平间距基准
--tv-space-table-y: 4px; // 表格单元格垂直间距基准

Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/calendar-view/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/calendar-view/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 文本色、背景色、悬浮色
Expand Down
16 changes: 8 additions & 8 deletions packages/theme/src/dialog-box/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);

Expand All @@ -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;

Expand All @@ -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 {
Expand All @@ -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;
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/dialog-box/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 头部字重
Expand Down
10 changes: 5 additions & 5 deletions packages/theme/src/drawer/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}

Expand All @@ -206,7 +206,7 @@
display: flex;
align-items: center;
justify-content: flex-end;
padding: 24px 0 32px;
padding: 24px 0 var(--tv-Drawer-padding);
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/drawer/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 抽屉组件圆角
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/form-item/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 7 additions & 5 deletions packages/theme/src/form-item/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
6 changes: 3 additions & 3 deletions packages/theme/src/image-viewer/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 0 additions & 4 deletions packages/theme/src/link-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 5 additions & 7 deletions packages/theme/src/modal/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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;
// 弹窗内容区的消息文本字体大小
Expand All @@ -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);

// ------------------------------------- 消息场景
// 消息的背景色
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/steps/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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);
// 竖式步骤条圆点背景色
Expand Down
16 changes: 8 additions & 8 deletions packages/theme/src/tabs/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 标签栏更多文字悬浮文本色
Expand Down Expand Up @@ -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)
Expand All @@ -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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Review unusual spacing values

The current values raise some concerns:

  1. 5px margin is non-standard and should align with the spacing scale
  2. 47px height is an odd number that might cause sub-pixel rendering issues
- --tv-Tabs-dark-margin-top: 5px;
+ --tv-Tabs-dark-margin-top: var(--tv-space-base, 4px);
- --tv-Tabs-dark-item-height: 47px;
+ --tv-Tabs-dark-item-height: var(--tv-size-height-xl, 48px);

Also applies to: 95-95

// 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);
// 标签项默认右外边距
Expand Down Expand Up @@ -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类型选项文本色
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/wizard/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider keeping the calculated value for better theme adaptability

The change from calc(var(--tv-space-base, 4px) * 9) to 36px makes the margin less adaptable to theme customization. While both values are numerically equivalent (4px * 9 = 36px), the fixed pixel value won't automatically adjust when --tv-space-base is customized.

This change also introduces inconsistency, as other spacing variables in the file continue to use CSS variables (e.g., --tv-space-md, --tv-space-lg).

Consider reverting to the calculated value:

--- --tv-Wizard-button-group-margin-top: 36px;
+++ --tv-Wizard-button-group-margin-top: calc(var(--tv-space-base, 4px) * 9);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
--tv-Wizard-button-group-margin-top: 36px;
--tv-Wizard-button-group-margin-top: calc(var(--tv-space-base, 4px) * 9);

// 页向导模式按钮左外边距
--tv-Wizard-button-margin-left: var(--tv-space-lg, 12px);
// 垂直模式线条宽度
Expand Down
Loading