fix: fix the error in building the official website and add the default value of the theme (#3262)

Author: zzcr

examples/sites/src/views/features.vue

@@ -167,7 +167,7 @@ const toUpperCamelCase = (str) =>
     .join('')
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .feature-list-container :deep(.reference-wrapper) {
   display: flex;
   align-items: center;

packages/theme/build/mapVar.js

@@ -322,6 +322,11 @@ export const mapVar = {
   // -- 暗色新增 --
   '--tv-color-icon-inverse': 'var(--tv-base-color-common-1)', // #fff 亮色暗色都是白色场景
   '--tv-color-icon-inverse-tint': 'var(--tv-base-color-common-1)', // #fff 暗色反色成黑色：按钮下拉线头
+  // -- 空状态图标 --
+  '--tv-color-no-data-gary-1': 'var(--tv-base-color-common-4)', // #f0f0f0
+  '--tv-color-no-data-gary-2': 'var(--tv-base-color-common-1)', // #ffffff
+  '--tv-color-no-data-border': 'var(--tv-base-color-common-8)', // #808080
+  '--tv-color-no-data-brand': 'var(--tv-base-color-brand-6)', // #317af7
 
   /** 2.6 背景色 **/
 
@@ -335,8 +340,8 @@ export const mapVar = {
   '--tv-color-bg-gray-2': 'var(--tv-base-color-common-5)', // #e6e6e6 灰色背景-2：灰色标签背景色/进度条灰色背景
   '--tv-color-bg-header': 'var(--tv-base-color-common-3)', // #f5f5f5 表头背景色
   '--tv-color-bg-mask': 'rgba(0, 0, 0, 20%)', // 全局加载蒙层/抽屉弹窗蒙层
-  '--tv-color-bg-mask-block': 'rgba(255, 255, 255, 70%)', // 模块加载蒙层
-  '--tv-color-bg-dark': 'var(--tv-base-color-brand)', // #191919", 深色背景色 顶部导航/ 深色tab/深色提示背景色
+  '--tv-color-bg-mask-block': 'rgba(255, 255, 255, 70%)', // 模块内容加载蒙层
+  '--tv-color-bg-dark': 'var(--tv-base-color-brand)', // #191919", 深色背景色 顶部导航/ 深色tab
 
   /* 2.6.2 禁用 */
   '--tv-color-bg-disabled': 'var(--tv-base-color-common-4)', // #f0f0f0 禁用背景色
@@ -362,7 +367,7 @@ export const mapVar = {
   '--tv-color-bg-active-dark': 'var(--tv-base-color-common-3)', // #f5f5f5 深色背景悬浮色
 
   // -- 暗色新增 --
-  '--tv-color-bg-2': 'var(--tv-base-color-common-1)', // #fff下拉面板/tip背景色
+  '--tv-color-bg-2': 'var(--tv-base-color-common-1)', // #fff下拉面板/tip的normal背景色
   '--tv-color-bg-3': 'var(--tv-base-color-common-1)', //  #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/modal,dialogbox背景色/容器二级背景色": "左侧导航/折叠面板/表格下展背景
   '--tv-color-bg-4': 'var(--tv-base-color-common-7)', // #c2c2c2 时间线实心圆点
   '--tv-color-bg-progressbar': 'var(--tv-base-color-success-6)', // #5cb300 step当前进度背景色 （考虑去掉，成功主色替代）
@@ -378,6 +383,7 @@ export const mapVar = {
   '--tv-color-bg-inverse-tint-1': 'var(--tv-base-color-common-1)', // #fff 图片工具栏背景色
   '--tv-color-bg-disabled-control': 'var(--tv-base-color-common-7)', // #c2c2c2 滑块高亮部分禁用色
   '--tv-color-bg-inverse-disabled': 'var(--tv-base-color-common-1)', // #fff 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#999）
+  '--tv-color-bg-dark-1': 'var(--tv-base-color-common-11)', // #191919 tip的dark背景色
 
   /** 2.7 边框色/分割线颜色 **/
 

packages/theme/src/aurora-theme-index.js

@@ -342,9 +342,9 @@
   // 仅图标且default主题时， 外边框的颜色
   --tv-Button-border-color-only-icon-default: var(--tv-color-border, #c2c2c2);
   // 仅图标且default主题时， 图标颜色
-  --tv-Button-color-only-icon-default: var(--tv-color-icon);
+  --tv-Button-color-only-icon-default: var(--tv-color-icon, #808080);
   // 仅图标且default主题时， 图标颜色
-  --tv-Button-color-only-icon-default-hover: var(--tv-color-icon-hover);
+  --tv-Button-color-only-icon-default-hover: var(--tv-color-icon-hover, #191919);
   // 仅图标且default主题时， 外边框的悬浮色
   --tv-Button-border-color-only-icon-default-hover: var(--tv-color-border-hover, #191919);
   // 仅图标且有边框时，边框的圆角大
@@ -355,15 +355,15 @@
   // 仅图标-无边框的背景色
   --tv-Button-bg-color-only-icon-ontext: transparent;
   // 仅图标-无边框的悬浮时的图标色
-  --tv-Button-bg-color-only-icon: var(--tv-color-icon);
+  --tv-Button-bg-color-only-icon: var(--tv-color-icon, #808080);
   // 仅图标-无边框的悬浮时的背景色
   --tv-Button-bg-color-only-icon-ontext-hover: var(--tv-color-bg, #f5f5f5);
   // 仅图标-无边框的悬浮时的图标色
-  --tv-Button-bg-color-only-icon-hover: var(--tv-color-icon-hover);
+  --tv-Button-bg-color-only-icon-hover: var(--tv-color-icon-hover, #191919);
   // 有图标-图标颜色
   --tv-Button-icon-color: var(--tv-color-icon, #808080);
   // 仅图标-无边框的悬浮时的禁用事的图标色
-  --tv-Button-disabled-color-only-icon-hover: var(--tv-color-icon);
+  --tv-Button-disabled-color-only-icon-hover: var(--tv-color-icon, #808080);
   // 纯文字时，文字颜色
   --tv-Button-text-color-ontext: var(--tv-color-text-link, #1476ff); // 蓝色文字
   // 纯文字时，文字的禁用色
@@ -374,7 +374,7 @@
   // 混排有边框和无边框时，图标右边距
   --tv-Button-margin-right-isicon-svg: var(--tv-space-sm, 4px);
   // 混排有边框和无边框时，图标颜色
-  --tv-Button-color-icon-svg: var(--tv-color-icon);
+  --tv-Button-color-icon-svg: var(--tv-color-icon, #808080);
   // 混排无边框时,文字的颜色
   --tv-Button-text-color-isicon-ontext: var(--tv-color-text-control, #191919); // 黑色文字
   // 混排无边框时,文字的禁用色

packages/theme/src/button/vars.less

@@ -44,7 +44,7 @@
   // 幻灯片外的指示器默认背景色
   --tv-Carousel-outside-button-bg-color: var(--tv-color-bg-5, #e6e6e6);
   // 幻灯片外的当前指示器背景色
-  --tv-Carousel-outside-button-active-bg-color: var(--tv-color-act-primary-bg-active);
+  --tv-Carousel-outside-button-active-bg-color: var(--tv-color-act-primary-bg-active, #595959);
   // 标签按钮的字号
   --tv-Carousel-labels-button-font-size: var(--tv-font-size-default, 14px);
   // 箭头悬浮文本颜色

packages/theme/src/carousel/vars.less

@@ -48,5 +48,5 @@
   // 复选框选中禁用边框色
   --tv-Checkbox-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive, #dbdbdb);
   // 复选框禁用反白色
-  --tv-Checkbox-icon-inverse-disabled: var(--tv-color-bg-inverse-disabled)
+  --tv-Checkbox-icon-inverse-disabled: var(--tv-color-bg-inverse-disabled, #ffffff);
 }

packages/theme/src/checkbox/vars.less

@@ -12,7 +12,7 @@
 
 .inject-DialogBox-vars() {
   // 对话框背景蒙层
-  --tv-DialogBox-mask-bg-color: var(--tv-color-bg-mask);
+  --tv-DialogBox-mask-bg-color: var(--tv-color-bg-mask, rgba(0, 0, 0, 20%));
   // 对话框背景色
   --tv-DialogBox-bg-color: var(--tv-color-bg-3, #ffffff);
   // 对话框圆角

packages/theme/src/dark-theme-index.js

@@ -8,7 +8,7 @@
   // 成功颜色
   --tv-Divider-success-color: var(--tv-color-success-border, #5cb300);
   // 默认颜色
-  --tv-Divider-default-color: var(--tv-color-border-divider);
+  --tv-Divider-default-color: var(--tv-color-border-divider, #f0f0f0);
   // 告警颜色
   --tv-Divider-warning-color: var(--tv-color-warn-border, #ff8800);
   // 信息颜色

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

@@ -121,5 +121,5 @@
   //消息关闭按钮的悬浮颜色
   --tv-Modal-msg-box-close-icon-color-hover: var(--tv-color-icon-hover, #191919);
   // 加载图标颜色
-  --tv-Modal-loading-status-icon-color: var(--tv-color-icon-active);
+  --tv-Modal-loading-status-icon-color: var(--tv-color-icon-active, #191919);
 }