feat(theme): optimize the overall basic variables and update treeMenu css var

examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue

@@ -17,9 +17,9 @@ function loadNode(node, resolve) {
 
   let hasChild
 
-  if (node.data.label === '指南') {
+  if (node.data.label === '表单组件') {
     hasChild = true
-  } else if (node.data.label === '组件') {
+  } else if (node.data.label === '数据组件') {
     hasChild = false
   } else {
     hasChild = Math.random() > 0.5

examples/sites/demos/pc/app/tree-menu/lazy-load.vue

@@ -26,7 +26,7 @@ export default {
 
       if (node.data.label === '表单组件') {
         hasChild = true
-      } else if (node.data.label === '组件') {
+      } else if (node.data.label === '数据组件') {
         hasChild = false
       } else {
         hasChild = Math.random() > 0.5

packages/theme/src/autocomplete/vars.less

@@ -25,7 +25,7 @@
   // 面板垂直外间距
   --tv-Autocomplete-panel-margin-y: var(--tv-space-sm, 4px);
   // 面板圆角
-  --tv-Autocomplete-panel-border-radius: var(--tv-border-radius-default, 6px);
+  --tv-Autocomplete-panel-border-radius: var(--tv-border-radius-md, 6px);
   // 面板背景色
   --tv-Autocomplete-panel-bg-color: var(--tv-color-bg-secondary, #fff);
   // 面板阴影

packages/theme/src/base-select/vars.less

@@ -45,12 +45,12 @@
   // 尾部文本色
   --tv-BaseSelect-suffix-text-color: var(--tv-color-text-weaken, #808080);
   // 输入框高度（默认尺寸）
-  --tv-BaseSelect-input-height: var(--tv-size-height-default, 32px);
+  --tv-BaseSelect-input-height: var(--tv-size-height-md, 32px);
 
   // 多选标签容器内边距
   --tv-BaseSelect-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px);
   // 多选标签容器高度
-  --tv-BaseSelect-tags-height: var(--tv-size-height-default, 32px);
+  --tv-BaseSelect-tags-height: var(--tv-size-height-md, 32px);
   // 标签外边距
   --tv-BaseSelect-tag-margin: var(--tv-space-xs, 2px);
 

packages/theme/src/base/index.less

@@ -11,6 +11,6 @@
 */
 
 @import './reset.less';
-@import './vars.less';
-// @import './old-theme.less';
+// @import './vars.less';
+@import './old-theme.less';
 @import './transition.less';

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

@@ -310,33 +310,33 @@
   --tv-color-bg-gray-2: var(--tv-base-color-common-3); // #e6e6e6 灰色背景-2灰色标签背景色
   --tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
   --tv-color-bg-mask: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色
-  --tv-color-bg-dark:var(--tv-base-color-common-9); // #464c59 深色背景色 顶部导航/ 深色tab/深色提示背景色
+  --tv-color-bg-dark: var(--tv-base-color-common-9); // #464c59 深色背景色 顶部导航/ 深色tab/深色提示背景色
 
 
   /* 2.6.2 禁用 */
   --tv-color-bg-disabled: var(--tv-base-color-common-2); // #f5f5f6 禁用背景色
   --tv-color-bg-disabled-control-checked: var(--tv-base-color-common-4); // #dbdbdb 深色背景禁用色，控件选中状态下的禁用背景色
-  --tv-color-bg-disabled-control-unactive:var(--tv-base-color-common-4) ; // #dfe1e6 开关组件“关”禁用背景色
+  --tv-color-bg-disabled-control-unactive: var(--tv-base-color-common-4) ; // #dfe1e6 开关组件“关”禁用背景色
   --tv-color-bg-disabled-control-active: var(--tv-base-color-brand-3); // #beccfa  深色背景禁用色，开关组件“开”禁用背景色
 
   /* 2.6.3 悬浮 */
-  --tv-color-bg-hover:  var(--tv-base-color-brand-1); // #f2f5fc 浅背景-悬浮色
+  --tv-color-bg-hover: var(--tv-base-color-brand-1); // #f2f5fc 浅背景-悬浮色
   --tv-color-bg-hover-primary: var(--tv-base-color-common-10); // #5c6173 一级tab页签背景-悬浮色 /分页hover背景颜色 /灰色悬浮背景色：表格悬浮、下拉悬浮、左侧导航悬浮
   --tv-color-bg-hover-secondary: var(--tv-base-color-common-1); // #fff 次要背景色悬浮色 / 穿梭框头部/折叠面板背景色
   --tv-color-bg-hover-1: var(--tv-base-color-brand-1); // #f2f5fc  浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色
   --tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
   --tv-color-bg-hover-3: var(--tv-base-color-brand-1); // #f0f7ff 悬浮背景色
-  --tv-color-bg-hover-dark:var(--tv-base-color-common-10); // #5c6173 深色背景悬浮色
+  --tv-color-bg-hover-dark: var(--tv-base-color-common-10); // #5c6173 深色背景悬浮色
 
   /* 2.6.4 active/选中 */
-  --tv-color-bg-active: var(--tv-base-color-brand); // #5e7ce0  分页选中背景色/左侧导航选中背景色
+  --tv-color-bg-active: var(--tv-base-color-brand-1); // #5e7ce0  分页选中背景色/左侧导航选中背景色
   --tv-color-bg-active-control: var(--tv-base-color-brand); // #5e7ce0 主色蓝，单选/复选选中背景色、开关开的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色
   --tv-color-bg-active-primary: var(--tv-base-color-brand); // #5e7ce0 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色
   --tv-color-bg-active-secondary: var(--tv-base-color-common-5); // #adb0b8 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
   --tv-color-bg-active-emphasize: var(--tv-base-color-brand); //  #5e7ce0 时间选择选中背景色
   --tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色
   --tv-color-bg-active-secondary: var(--tv-base-color-common-1); // #fff 次要背景激活色
-  --tv-color-bg-active-dark:var(--tv-base-color-common-3); // #eef0f5 深色背景色激活色
+  --tv-color-bg-active-dark: var(--tv-base-color-common-3); // #eef0f5 深色背景色激活色
 
   /** 2.7 边框色/分割线颜色 **/
 
@@ -366,7 +366,7 @@
   --tv-font-size-lg: 16px;
   --tv-font-size-xl: 18px;
   --tv-font-size-xxl: 20px;
-  --tv-font-size-default:var(--tv-font-size-sm);
+  --tv-font-size-default: var(--tv-font-size-sm);
 
   --tv-font-size-heading-xs: 16px; // 卡片标题
   --tv-font-size-heading-sm: 18px; // 页面标题
@@ -385,12 +385,11 @@
 
   /** 4. 圆角变量 **/
   --tv-border-radius-xs: 2px;
-  --tv-border-radius-sm: 4px;
-  --tv-border-radius-md: 6px; // 默认
-  --tv-border-radius-lg: 8px;
+  --tv-border-radius-sm: 2px;
+  --tv-border-radius-md: 2px; // 默认
+  --tv-border-radius-lg: 4px;
   --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。 
-  --tv-border-radius-default: var(--tv-border-radius-xs);
-  --tv-border-radius-brand: var(--tv-border-radius-xs); // 品牌相关。用于圆角，按钮、分页等场景
+  --tv-border-radius-brand: var(--tv-border-radius-md); // 品牌相关。用于圆角，按钮、分页等场景
 
   /** 5. 边框  **/
   --tv-border-width: 1px;
@@ -410,11 +409,10 @@
 
   /** 7.1 表单类组件的 height */
   --tv-size-height-xs: 24px; // mini 尺寸
-  --tv-size-height-sm: 28px; // small 尺寸
-  --tv-size-height-md: 32px; // medium 尺寸 - 默认
-  --tv-size-height-lg: 36px; // large 尺寸
-  --tv-size-height-xl: 42px; //  xLarge 尺寸
-  --tv-size-height-default: var(--tv-size-height-sm);
+  --tv-size-height-sm: 24px; // small 尺寸
+  --tv-size-height-md: 28px; // medium 尺寸 - 默认
+  --tv-size-height-lg: 32px; // large 尺寸
+  --tv-size-height-xl: 36px; //  xLarge 尺寸
 
   /** 7.2 图标大小 width, height **/
   --tv-icon-size: 14px;

packages/theme/src/base/vars.less

@@ -390,8 +390,7 @@
   --tv-border-radius-md: 6px; // 默认
   --tv-border-radius-lg: 8px;
   --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。 
-  --tv-border-radius-default:var(--tv-border-radius-md);
-  --tv-border-radius-brand:var(--tv-border-radius-round); // 品牌相关。用于圆角，按钮、分页等场景
+  --tv-border-radius-brand: var(--tv-border-radius-round); // 品牌相关。用于圆角，按钮、分页等场景
 
   /** 5. 边框  **/
   --tv-border-width: 1px;
@@ -415,7 +414,6 @@
   --tv-size-height-md: 32px; // medium 尺寸 - 默认
   --tv-size-height-lg: 40px; // large 尺寸
   --tv-size-height-xl: 48px; //  xLarge 尺寸
-  --tv-size-height-default:var(--tv-size-height-md);
 
   /** 7.2 图标大小 width, height **/
   --tv-icon-size: 16px;

packages/theme/src/button-group/vars.less

@@ -12,7 +12,7 @@
 
 .inject-ButtonGroup-vars() {
   // 按钮组圆角
-  --tv-ButtonGroup-border-radius: var(--tv-border-radius-default);
+  --tv-ButtonGroup-border-radius: var(--tv-border-radius-md);
   // 按钮组字体行高
   --tv-ButtonGroup-line-height-number: var(--tv-line-height-number);
   // 默认按钮未选中项背景色
@@ -22,7 +22,7 @@
   // 空数据文本色
   --tv-ButtonGroup-empty-text-color: var(--tv-color-text-weaken);
   // 未指定尺寸的按钮项高度
-  --tv-ButtonGroup-item-btn-height: var(--tv-size-height-default);
+  --tv-ButtonGroup-item-btn-height: var(--tv-size-height-md);
   // 按钮组默认字号
   --tv-ButtonGroup-item-btn-font-size: var(--tv-font-size-default);
   // 按钮项禁用背景色

packages/theme/src/button/vars.less

@@ -30,7 +30,7 @@
   // 默认时按钮字号
   --tv-Button-font-size: var(--tv-font-size-default);
   // 默认时按钮高度
-  --tv-Button-height: var(--tv-size-height-default);
+  --tv-Button-height: var(--tv-size-height-md);
   // 默认时按钮水平间距
   --tv-Button-padding-x: 24px; // space变量不存在，是否替换成 space-base * 6 这种？
   // 默认时按钮最小宽度
@@ -310,7 +310,7 @@
   // 仅图标且default主题时， 外边框的悬浮色
   --tv-Button-border-color-only-icon-default-hover: var(--tv-color-border-secondary);
   // 仅图标且有边框时，边框的圆角大
-  --tv-Button-border-radius-only-icon: var(--tv-border-radius-default);
+  --tv-Button-border-radius-only-icon: var(--tv-border-radius-md);
 
   // 仅图标且无边框时，背景阴影的圆角
   --tv-Button-border-radius-only-icon-ontext: var(--tv-border-radius-sm);

packages/theme/src/calendar/vars.less

@@ -36,9 +36,9 @@
   // 日历表头文字字号
   --tv-Calendar-content-heard-font-size: var(--tv-font-size-default);
   // 日历表头输入框选项圆角
-  --tv-Calendar-selected-border-radius: var(--tv-border-radius-default);
+  --tv-Calendar-selected-border-radius: var(--tv-border-radius-md);
   // 日历表头输入框圆角
-  --tv-Calendar-input-border-radius: var(--tv-border-radius-default);
+  --tv-Calendar-input-border-radius: var(--tv-border-radius-md);
   // 日历表头输入框字号
   --tv-Calendar-input-font-size: var(--tv-font-size-default);
   // 日历输入框hover边框色

packages/theme/src/cascader-panel/vars.less

@@ -12,7 +12,7 @@
 
 .inject-CascaderPanel-vars() {
   // 下拉菜单面板的边框圆角
-  --tv-CascaderPanel-border-radius: var(--tv-border-radius-default, 6px);
+  --tv-CascaderPanel-border-radius: var(--tv-border-radius-md, 6px);
   // 下拉菜单面板的边框色
   --tv-CascaderPanel-border-color: var(--tv-color-border-disabled, #dbdbdb);
   // 下拉菜单面板的字体大小

packages/theme/src/cascader/vars.less

@@ -20,7 +20,7 @@
   // 聚焦时显示的边框色
   --tv-Cascader-focus-border-color: var(--tv-color-border-hover, #191919);
   // 边框圆角
-  --tv-Cascader-border-radius: var(--tv-border-radius-default, 6px);
+  --tv-Cascader-border-radius: var(--tv-border-radius-md, 6px);
   // icon图标色
   --tv-Cascader-icon-color: var(--tv-color-icon, #808080);
   // medium尺寸时的字体大小

packages/theme/src/checkbox-button/vars.less

@@ -32,7 +32,7 @@
   // 按钮形式复选框悬浮默认边框色
   --tv-CheckboxButton-border-color-hover: var(--tv-color-border-active-control);
   // 按钮组按钮圆角
-  --tv-CheckboxButton-border-radius: var(--tv-border-radius-default);
+  --tv-CheckboxButton-border-radius: var(--tv-border-radius-md);
   // 按钮组禁用边框色
   --tv-CheckboxButton-disabled-border-color: var(--tv-color-border-disabled);
   // 按钮组小按钮字号

packages/theme/src/checkbox/vars.less

@@ -38,7 +38,7 @@
   // 默认复选框边框圆角
   --tv-Checkbox-border-radius: var(--tv-border-radius-sm);
   // 默认复选框外边框圆角
-  --tv-Checkbox-outline-border-radius: var(--tv-border-radius-default);
+  --tv-Checkbox-outline-border-radius: var(--tv-border-radius-md);
   // 默认复选框的右侧外边距
   --tv-Checkbox-label-margin-right: 24px;
   // 边框模式复选框禁用边框色

packages/theme/src/color-picker/vars.less

@@ -2,7 +2,7 @@
   // 按钮边框色
   --tv-ColorPicker-border-color: var(--tv-color-border-ghost);
   // 按钮边框圆角
-  --tv-ColorPicker-border-radius-md: var(--tv-border-radius-default);
+  --tv-ColorPicker-border-radius-md: var(--tv-border-radius-md);
   // 按钮边框小圆角
   --tv-ColorPicker-border-radius-xs: var(--tv-border-radius-xs);
   // 按钮垂直内边距

packages/theme/src/date-panel/vars.less

@@ -28,7 +28,7 @@
   // 面板阴影
   --tv-DatePanel-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
   // 面板圆角
-  --tv-DatePanel-border-radius: var(--tv-border-radius-default, 6px);
+  --tv-DatePanel-border-radius: var(--tv-border-radius-md, 6px);
   // 面板外间距
   --tv-DatePanel-margin: var(--tv-space-sm, 4px) 0;
 

packages/theme/src/date-table/vars.less

@@ -79,5 +79,5 @@
   // 禁用单元格圆角
   --tv-DateTable-td-border-radius-disabled: var(--tv-border-radius-round, 999px);
   // 星期行高
-  --tv-DateTable-week-height: var(--tv-size-height-default, 32px);
+  --tv-DateTable-week-height: var(--tv-size-height-md, 32px);
 }

packages/theme/src/dept/vars.less

@@ -16,5 +16,5 @@
   --tv-Dept-label-font-weight: var(--tv-font-weight-bold);
   --tv-Dept-selected-info-text-color: var(--tv-color-text);
   --tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
-  --tv-Dept-selected-info-border-radius: var(--tv-border-radius-default);
+  --tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);
 }

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

@@ -12,7 +12,7 @@
 
 .inject-DialogSelect-vars() {
   // 左侧表格的圆角
-  --tv-DialogSelect-border-radius: var(--tv-border-radius-default, 6px);
+  --tv-DialogSelect-border-radius: var(--tv-border-radius-md, 6px);
   // 图标尺寸
   --tv-DialogSelect-icon-size: var(--tv-icon-size, 16px);
 

packages/theme/src/dropdown-item/vars.less

@@ -49,7 +49,7 @@
   );
 
   // 菜单项高度(默认）
-  --tv-DropdownItem-height: var(--tv-size-height-default, 32px);
+  --tv-DropdownItem-height: var(--tv-size-height-md, 32px);
   // 菜单项高度(small）
   --tv-DropdownItem-height-sm: var(--tv-size-height-sm, 28px);
   // 菜单项高度(mini）

packages/theme/src/dropdown-menu/vars.less

@@ -16,7 +16,7 @@
   // 下拉菜单弹框的背景色
   --tv-DropdownMenu-bg-color: var(--tv-color-bg-secondary, #ffffff);
   // 下拉菜单弹框的圆角
-  --tv-DropdownMenu-border-radius: var(--tv-border-radius-default, 6px);
+  --tv-DropdownMenu-border-radius: var(--tv-border-radius-md, 6px);
   // 下拉菜单的最小宽度
   --tv-DropdownMenu-min-width: 124px;
   // 下拉菜单弹框与触发按钮的距离

packages/theme/src/fall-menu/vars.less

@@ -48,5 +48,5 @@
   // 图标填充颜色
   --tv-FallMenu-box-svg-fill: var(--tv-color-icon);
   // 菜单列表圆角
-  --tv-FallMenu-box-border-radius: var(--tv-border-radius-default);
+  --tv-FallMenu-box-border-radius: var(--tv-border-radius-md);
 }

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

@@ -28,7 +28,7 @@
   // 表单项错误边框颜色
   --tv-FormItem-border-color-error: var(--tv-color-error-border);
   // 表单项高度
-  --tv-FormItem-height: var(--tv-size-height-default);
+  --tv-FormItem-height: var(--tv-size-height-md);
   // 表单项下侧外边距
   --tv-FormItem-margin-bottom: 24px;
   // 表单校验块级错误消息上侧内边距

packages/theme/src/grid/vars.less

@@ -134,7 +134,7 @@
   // 筛选输入框悬浮边框颜色
   --tv-Grid-filter-input-border-color-hover: var(--tv-color-border-hover);
   // 筛选输入框边框圆角
-  --tv-Grid-filter-input-border-radius: var(--tv-border-radius-default);
+  --tv-Grid-filter-input-border-radius: var(--tv-border-radius-md);
   // -------工具栏相关样式-------
   // 工具栏垂直边距
   --tv-Grid-toolbar-padding-y: var(--tv-space-xl);
@@ -147,7 +147,7 @@
   // 工具栏图标按钮悬浮边框色
   --tv-Grid-toolbar-btn-icon-border-color-hover: var(--tv-color-border-hover);
   // 工具栏图标按钮边框圆角
-  --tv-Grid-toolbar-btn-icon-border-radius: var(--tv-border-radius-default);
+  --tv-Grid-toolbar-btn-icon-border-radius: var(--tv-border-radius-md);
   // -------mini/small表格-------
   // mini表格单元格水平内边距
   --tv-Grid-cell-padding-x-mini: 16px;
@@ -161,9 +161,9 @@
   // 树节点图标右侧内边距
   --tv-Grid-tree-expand-icon-padding-right: var(--tv-space-md);
   // 内置输入框高度
-  --tv-Grid-input-height: var(--tv-size-height-default);
+  --tv-Grid-input-height: var(--tv-size-height-md);
   // 内置输入框边框圆角
-  --tv-Grid-input-border-radius: var(--tv-border-radius-default);
+  --tv-Grid-input-border-radius: var(--tv-border-radius-md);
   // 内置输入框悬浮边框颜色
   --tv-Grid-input-border-color-hover: var(--tv-color-border-hover);
   // 表格无数据背景图片

packages/theme/src/input/vars.less

@@ -21,9 +21,9 @@
   // small和mini尺寸字体大小
   --tv-Input-small-font-size: var(--tv-font-size-sm);
   // 输入框高度v
-  --tv-Input-height: var(--tv-size-height-default);
+  --tv-Input-height: var(--tv-size-height-md);
   // 输入框边框圆角
-  --tv-Input-border-radius: var(--tv-border-radius-default);
+  --tv-Input-border-radius: var(--tv-border-radius-md);
   // 输入框边框色
   --tv-Input-border-color: var(--tv-color-border);
   // 输入框hover时边框色

packages/theme/src/ip-address/vars.less

@@ -12,7 +12,7 @@
 
 .inject-IpAddress-vars() {
   // IP地址输入框高度
-  --tv-IpAddress-normal-height: var(--tv-size-height-default);
+  --tv-IpAddress-normal-height: var(--tv-size-height-md);
   // IP地址输入框宽度
   --tv-IpAddress-normal-width: 182px;
   // IP地址输入框默认水平内边距
@@ -32,7 +32,7 @@
   // IP地址输入框默认背景色
   --tv-IpAddress-normal-bg-color: var(--tv-color-bg-secondary);
   // IP地址输入框圆角
-  --tv-IpAddress-border-radius: var(--tv-border-radius-default);
+  --tv-IpAddress-border-radius: var(--tv-border-radius-md);
   // IP地址输入框字号
   --tv-IpAddress-font-size: var(--tv-font-size-default);
   // IP地址输入框字族
@@ -50,7 +50,7 @@
   // 大尺寸高度
   --tv-IpAddress-medium-height: calc(var(--tv-size-height-lg) - 2px);
   // 默认尺寸高度
-  --tv-IpAddress-default-height: calc(var(--tv-size-height-default) - 2px);
+  --tv-IpAddress-default-height: calc(var(--tv-size-height-md) - 2px);
   // 小尺寸高度
   --tv-IpAddress-small-height: calc(var(--tv-size-height-sm) - 2px);
   // 超小尺寸高度