feat: Add default values to theme variables

packages/theme/build/buildVarToObj.js

@@ -1,13 +1,18 @@
 import fs from 'node:fs'
 
 export default () => {
-  let varsString = fs.readFileSync('../src/base/vars.less', {encoding: 'utf-8'})
+  let varsString = fs.readFileSync('../src/base/vars.less', { encoding: 'utf-8' })
 
-  varsString = varsString.replace(':root', 'export const mapVar =')
-  .replaceAll('  --tv', '  "--tv')
-  .replaceAll(': ', ':')
-  .replaceAll(':', '": "')
-  .replaceAll(';', '",')
+  const startIndex = varsString.indexOf('{')
+
+  varsString =
+    'export const mapVar = ' +
+    varsString
+      .slice(startIndex)
+      .replaceAll('  --tv', '  "--tv')
+      .replaceAll(': ', ':')
+      .replaceAll(':', '": "')
+      .replaceAll(';', '",')
 
   fs.writeFileSync('./mapVar.js', varsString)
 }

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

@@ -25,7 +25,7 @@
   // 图标色（默认）
   --tv-ActionMenu-icon-color: var(--tv-color-icon-link, #1476ff);
   // 图标色（ card 类型）
-  --tv-ActionMenu-icon-color-card: var(--tv-color-icon-control);
+  --tv-ActionMenu-icon-color-card: var(--tv-color-icon-control, #191919);
   // 图标禁用色
   --tv-ActionMenu-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);
 }

packages/theme/src/alert/vars.less

@@ -22,11 +22,11 @@
   //-------------------------------------------------------全局场景：------------------------------------------
 
   // 警告的圆角
-  --tv-Alert-border-radius: var(--tv-border-radius-lg);
+  --tv-Alert-border-radius: var(--tv-border-radius-lg, 8px);
   // 警告的水平内边距
-  --tv-Alert-padding-x: var(--tv-space-xl);
+  --tv-Alert-padding-x: var(--tv-space-xl, 16px);
   // 警告的垂直内边距
-  --tv-Alert-padding-y: var(--tv-space-xl);
+  --tv-Alert-padding-y: var(--tv-space-xl, 16px);
   // 警告的水平外边距
   --tv-Alert-margin-x: 0; // 规范上外边距不应该设置，但由于历史原因，normal时有固定的上下外边距，保留这个特性。
   // 警告的垂直外边距
@@ -37,75 +37,75 @@
   // 警告的图标大小
   --tv-Alert-icon-size: 20px;
   // 警告的图标右外边距
-  --tv-Alert-icon-margin-right: var(--tv-space-md);
+  --tv-Alert-icon-margin-right: var(--tv-space-md, 8px);
 
   //-------------------------------------------------------content 场景：title/description/opration------------
 
   // 警告的标题字号
-  --tv-Alert-title-font-size: var(--tv-font-size-lg);
+  --tv-Alert-title-font-size: var(--tv-font-size-lg, 16px);
   // 警告的标题字重
-  --tv-Alert-title-font-weight: var(--tv-font-weight-bold);
+  --tv-Alert-title-font-weight: var(--tv-font-weight-bold, 600);
   // 警告的标题颜色
-  --tv-Alert-title-text-color: var(--tv-color-text);
+  --tv-Alert-title-text-color: var(--tv-color-text, #191919);
   // 警告的标题下边距
-  --tv-Alert-title-margin-bottom: var(--tv-space-sm);
+  --tv-Alert-title-margin-bottom: var(--tv-space-sm, 4px);
 
   // 警告的描述字号
-  --tv-Alert-desc-font-size: var(--tv-font-size-default);
+  --tv-Alert-desc-font-size: var(--tv-font-size-default, 14px);
   // 警告的描述字重
-  --tv-Alert-desc-font-weight: var(--tv-font-weight-regular);
+  --tv-Alert-desc-font-weight: var(--tv-font-weight-regular, 400);
   // 警告的描述颜色
-  --tv-Alert-desc-text-color: var(--tv-color-text-secondary);
+  --tv-Alert-desc-text-color: var(--tv-color-text-secondary, #595959);
 
   //-------------------------------------------------------close-icon 场景：----------------------------------
 
   // 警告的关闭按钮的大小
-  --tv-Alert-close-icon-font-size: var(--tv-icon-size);
+  --tv-Alert-close-icon-font-size: var(--tv-icon-size, 16px);
   // 警告的关闭按钮的颜色
-  --tv-Alert-close-icon-color: var(--tv-color-icon);
+  --tv-Alert-close-icon-color: var(--tv-color-icon, #808080);
   // 警告的关闭按钮的悬浮颜色
-  --tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover);
+  --tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
   // 警告的关闭按钮距上边的距离
-  --tv-Alert-close-icon-top: var(--tv-space-lg);
+  --tv-Alert-close-icon-top: var(--tv-space-lg, 12px);
   // 警告的关闭按钮距右边的距离
-  --tv-Alert-close-icon-right: var(--tv-space-lg);
+  --tv-Alert-close-icon-right: var(--tv-space-lg, 12px);
 
   // 警告的关闭文本的大小
-  --tv-Alert-close-text-font-size: var(--tv-font-size-default);
+  --tv-Alert-close-text-font-size: var(--tv-font-size-default, 14px);
 
   //-------------------------------------------------------Normal 场景：---------------------------------------
 
   // 警告的Normal时，图标大小
-  --tv-Alert-icon-size-normal: var(--tv-icon-size);
+  --tv-Alert-icon-size-normal: var(--tv-icon-size, 16px);
   // 警告的Normal时，水平内边距
-  --tv-Alert-padding-x-normal: var(--tv-space-xl);
+  --tv-Alert-padding-x-normal: var(--tv-space-xl, 16px);
   // 警告的Normal时，垂直内边距
   --tv-Alert-padding-y-normal: 9px;
   // 警告的Normal时,水平外边距
   --tv-Alert-margin-x-normal: 0;
   // 警告的Normal时,垂直外边距
-  --tv-Alert-margin-y-normal: var(--tv-space-xl);
+  --tv-Alert-margin-y-normal: var(--tv-space-xl, 16px);
 
   //-------------------------------------------------------type 场景：------------------------------------------
 
   // success 主题时警告背景色
-  --tv-Alert-bg-color-success: var(--tv-color-success-bg-light);
+  --tv-Alert-bg-color-success: var(--tv-color-success-bg-light, #e6f2d5);
   // success 主题时警告图标色
-  --tv-Alert-icon-color-success: var(--tv-color-success-icon);
+  --tv-Alert-icon-color-success: var(--tv-color-success-icon, #5cb300);
   // error 主题时警告背景色
-  --tv-Alert-bg-color-error: var(--tv-color-error-bg-light);
+  --tv-Alert-bg-color-error: var(--tv-color-error-bg-light, #fce3e1);
   // error 主题时警告图标色
-  --tv-Alert-icon-color-error: var(--tv-color-error-icon);
+  --tv-Alert-icon-color-error: var(--tv-color-error-icon, #f23030);
   // warning 主题时警告背景色
-  --tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light);
+  --tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light, #ffebd1);
   // warning 主题时警告图标色
-  --tv-Alert-icon-color-warning: var(--tv-color-warn-icon);
+  --tv-Alert-icon-color-warning: var(--tv-color-warn-icon, #ff8800);
   // info 主题时警告背景色
-  --tv-Alert-bg-color-info: var(--tv-color-info-bg-light);
+  --tv-Alert-bg-color-info: var(--tv-color-info-bg-light, #deecff);
   // info 主题时警告图标色
-  --tv-Alert-icon-color-info: var(--tv-color-info-icon);
+  --tv-Alert-icon-color-info: var(--tv-color-info-icon, #1476ff);
   // simple 主题时警告背景色
-  --tv-Alert-bg-color-simple: var(--tv-color-bg);
+  --tv-Alert-bg-color-simple: var(--tv-color-bg, #f5f5f5);
   // simple 主题时警告图标色
-  --tv-Alert-icon-color-simple: var(--tv-color-icon);
+  --tv-Alert-icon-color-simple: var(--tv-color-icon, #808080);
 }

packages/theme/src/amount/vars.less

@@ -11,6 +11,6 @@
 */
 
 .inject-Amount-vars() {
-  --tv-Amount-icon-color: var(--tv-color-icon);
-  --tv-Amount-icon-size: var(--tv-icon-size);
+  --tv-Amount-icon-color: var(--tv-color-icon, #808080);
+  --tv-Amount-icon-size: var(--tv-icon-size, 16px);
 }

packages/theme/src/badge/vars.less

@@ -12,33 +12,33 @@
 
 .inject-Badge-vars() {
   // 标记的圆角
-  --tv-Badge-border-radius: var(--tv-border-radius-round);
+  --tv-Badge-border-radius: var(--tv-border-radius-round, 999px);
   // 标记的内边距
-  --tv-Badge-horizontal-padding: var(--tv-space-base);
+  --tv-Badge-horizontal-padding: var(--tv-space-base, 4px);
   // 标记的尺寸
-  --tv-Badge-font-size: var(--tv-font-size-sm);
+  --tv-Badge-font-size: var(--tv-font-size-sm, 12px);
   // 标记的字重
-  --tv-Badge-font-weight: var(--tv-font-weight-regular);
+  --tv-Badge-font-weight: var(--tv-font-weight-regular, 400);
   // 标记的文本色
-  --tv-Badge-text-color: var(--tv-color-text-inverse);
+  --tv-Badge-text-color: var(--tv-color-text-inverse, #ffffff);
   // 标记的背景色
-  --tv-Badge-bg-color: var(--tv-color-act-danger-bg);
+  --tv-Badge-bg-color: var(--tv-color-act-danger-bg, #f23030);
   // 标记的边框色
-  --tv-Badge-border-color: var(--tv-color-border-inverse-tint);
+  --tv-Badge-border-color: var(--tv-color-border-inverse-tint, #ffffff);
   // 标记a标签的文本及悬浮文本色
-  --tv-Badge-a-text-color: var(--tv-color-text-inverse);
+  --tv-Badge-a-text-color: var(--tv-color-text-inverse, #ffffff);
   // 标记左边距
-  --tv-Badge-margin-left: var(--tv-space-sm);
+  --tv-Badge-margin-left: var(--tv-space-sm, 4px);
   // 标记的小圆点背景色
-  --tv-Badge-dot-bg-color: var(--tv-color-act-danger-bg);
+  --tv-Badge-dot-bg-color: var(--tv-color-act-danger-bg, #f23030);
   // 标记的主要背景色
-  --tv-Badge-primary-bg-color: var(--tv-color-bg-primary);
+  --tv-Badge-primary-bg-color: var(--tv-color-bg-primary, #191919);
   // 标记的成功背景色
-  --tv-Badge-success-bg-color: var(--tv-color-act-success-bg);
+  --tv-Badge-success-bg-color: var(--tv-color-act-success-bg, #5cb300);
   // 标记的警告背景色
-  --tv-Badge-warning-bg-color: var(--tv-color-act-warning-bg);
+  --tv-Badge-warning-bg-color: var(--tv-color-act-warning-bg, #ff8800);
   // 标记的危险背景色
-  --tv-Badge-danger-bg-color: var(--tv-color-act-danger-bg);
+  --tv-Badge-danger-bg-color: var(--tv-color-act-danger-bg, #f23030);
   // 标记的信息背景色
-  --tv-Badge-info-bg-color: var(--tv-color-act-info-bg);
+  --tv-Badge-info-bg-color: var(--tv-color-act-info-bg, #1476ff);
 }

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

@@ -62,11 +62,11 @@
   --tv-BaseSelect-collapse-icon-margin-left: var(--tv-space-xs, 2px);
 
   // medium 尺寸的 tag 高度
-  --tv-BaseSelect-tag-height-medium: calc(var(--tv-size-height-lg) - 8px);
+  --tv-BaseSelect-tag-height-medium: calc(var(--tv-size-height-lg, 40px) - 8px);
   // 默认尺寸的 tag 高度
-  --tv-BaseSelect-tag-height-default: calc(var(--tv-size-height-md) - 8px);
+  --tv-BaseSelect-tag-height-default: calc(var(--tv-size-height-md, 32px) - 8px);
   // small 尺寸的tag高度
-  --tv-BaseSelect-tag-height-small: calc(var(--tv-size-height-sm) - 8px);
+  --tv-BaseSelect-tag-height-small: calc(var(--tv-size-height-sm, 28px) - 8px);
   // mini 尺寸的 tag 高度
-  --tv-BaseSelect-tag-height-mini: calc(var(--tv-size-height-xs) - 8px);
+  --tv-BaseSelect-tag-height-mini: calc(var(--tv-size-height-xs, 24px) - 8px);
 }

packages/theme/src/breadcrumb/vars.less

@@ -12,21 +12,21 @@
 
 .inject-Breadcrumb-vars() {
   // 字号
-  --tv-Breadcrumb-font-size: var(--tv-font-size-default);
+  --tv-Breadcrumb-font-size: var(--tv-font-size-default, 14px);
   // 文本行高
-  --tv-Breadcrumb-text-line-height: var(--tv-line-height-number);
+  --tv-Breadcrumb-text-line-height: var(--tv-line-height-number, 1.5);
   // 文本色
-  --tv-Breadcrumb-text-color: var(--tv-color-text-control);
+  --tv-Breadcrumb-text-color: var(--tv-color-text-control, #191919);
   // 选中文本色
-  --tv-Breadcrumb-last-text-color: var(--tv-color-text-active-3);
+  --tv-Breadcrumb-last-text-color: var(--tv-color-text-active-3, #191919);
   // 分隔符填充色
-  --tv-Breadcrumb-separator-icon-color: var(--tv-color-text-placeholder);
+  --tv-Breadcrumb-separator-icon-color: var(--tv-color-text-placeholder, #808080);
   // 分割箭头宽度
   --tv-Breadcrumb-separator-width: 16px;
   // 分隔图标的水平外边距
   --tv-Breadcrumb-separator-margin-x: 4px;
   // 分隔图标的垂直外边距
   --tv-Breadcrumb-separator-margin-y: 0;
   // 当前节点字重
-  --tv-Breadcrumb-text-font-weight: var(--tv-font-weight-bold);
+  --tv-Breadcrumb-text-font-weight: var(--tv-font-weight-bold, 600);
 }

packages/theme/src/bulletin-board/vars.less

@@ -12,47 +12,47 @@
 
 .inject-BulletinBoard-vars() {
   // 公告栏字号
-  --tv-BulletinBoard-font-size: var(--tv-font-size-default);
+  --tv-BulletinBoard-font-size: var(--tv-font-size-default, 14px);
   // 标题字号
-  --tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
+  --tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm, 18px);
   // 标题字重
-  --tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold);
+  --tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold, 600);
   // 标题文字颜色
-  --tv-BulletinBoard-title-text-color: var(--tv-color-text);
+  --tv-BulletinBoard-title-text-color: var(--tv-color-text, #191919);
   // 子项文字颜色
-  --tv-BulletinBoard-item-title-text-color: var(--tv-color-text);
+  --tv-BulletinBoard-item-title-text-color: var(--tv-color-text, #191919);
   // tabs标题想文字hover字重
-  --tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold);
+  --tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold, 600);
   // 子项标题文字字重
-  --tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold);
+  --tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold, 600);
   // 子项日期文字颜色
-  --tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
+  --tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken, #808080);
   // 子项日期文字尺寸
-  --tv-BulletinBoard-item-date-font-size: var(--tv-font-size-default);
+  --tv-BulletinBoard-item-date-font-size: var(--tv-font-size-default, 14px);
   // new标签背景颜色
-  --tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
+  --tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light, #fce3e1);
   // new标签文字颜色
-  --tv-BulletinBoard-new-text-color: var(--tv-color-error-text);
+  --tv-BulletinBoard-new-text-color: var(--tv-color-error-text, #f23030);
   // new标签边框圆角
-  --tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs);
+  --tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs, 2px);
   // new标签文字大小
-  --tv-BulletinBoard-new-font-size: var(--tv-font-size-sm);
+  --tv-BulletinBoard-new-font-size: var(--tv-font-size-sm, 12px);
   // 更多按钮文字颜色
-  --tv-BulletinBoard-more-text-color: var(--tv-color-text);
+  --tv-BulletinBoard-more-text-color: var(--tv-color-text, #191919);
   // 更多按钮图标颜色
-  --tv-BulletinBoard-more-icon-color: var(--tv-color-icon);
+  --tv-BulletinBoard-more-icon-color: var(--tv-color-icon, #808080);
   // 更多按钮图标悬浮颜色
-  --tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
+  --tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover, #191919);
   // 更多按钮文字尺寸
-  --tv-BulletinBoard-more-font-size: var(--tv-font-size-default);
+  --tv-BulletinBoard-more-font-size: var(--tv-font-size-default, 14px);
   // 更多按钮图标尺寸
-  --tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-default);
+  --tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-default, 14px);
   // tabs标签文字颜色
-  --tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
+  --tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text, #191919);
   // tabs标签背景颜色
-  --tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary);
+  --tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary, #191919);
   // tabs标签文字禁用颜色
-  --tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled);
+  --tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
   // tabs标签头部边框颜色
-  --tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border);
+  --tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border, #c2c2c2);
 }