feat(theme): [button] add dark themes, modify other theme variables a…

…nd component level variables (#2898)

examples/sites/src/views/layout/layout.vue

@@ -318,7 +318,7 @@ export default defineComponent({
     line-height: 1.5;
 
     .node-name-container {
-      color: #191919;
+      color: var(--tv-color-text-control);
       display: flex;
       align-items: center;
       flex-wrap: nowrap;
@@ -336,6 +336,7 @@ export default defineComponent({
         width: 12px;
         height: 12px;
         display: inline-block;
+        fill: var(--tv-color-icon-control);
       }
     }
   }
@@ -388,7 +389,7 @@ export default defineComponent({
     & > .tiny-svg {
       font-size: 18px;
       margin-left: 8px;
-      fill: #191919;
+      fill: var(--tv-color-text-control);
     }
   }
 }

packages/theme/src/autocomplete/vars.less

@@ -27,7 +27,7 @@
   // 面板圆角
   --tv-Autocomplete-panel-border-radius: var(--tv-border-radius-md, 6px);
   // 面板背景色
-  --tv-Autocomplete-panel-bg-color: var(--tv-color-bg-secondary, #fff);
+  --tv-Autocomplete-panel-bg-color: var(--tv-color-bg-2, #fff);
   // 面板阴影
   --tv-Autocomplete-panel-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
 

packages/theme/src/badge/vars.less

@@ -20,11 +20,11 @@
   // 标记的字重
   --tv-Badge-font-weight: var(--tv-font-weight-regular);
   // 标记的文本色
-  --tv-Badge-text-color: var(--tv-color-act-primary-text-white);
+  --tv-Badge-text-color: var(--tv-color-text-inverse);
   // 标记的背景色
   --tv-Badge-bg-color: var(--tv-color-act-danger-bg);
   // 标记a标签的文本及悬浮文本色
-  --tv-Badge-a-text-color: var(--tv-color-act-primary-text-white);
+  --tv-Badge-a-text-color: var(--tv-color-text-inverse);
   // 标记左边距
   --tv-Badge-margin-left: var(--tv-space-sm);
   // 标记的小圆点背景色

packages/theme/src/base/index.less

@@ -14,4 +14,5 @@
 @import './vars.less';
 // @import './old-theme.less';
 // @import './aurora-theme.less';
+// @import './dark-theme.less';
 @import './transition.less';

packages/theme/src/base/vars.less

@@ -144,9 +144,9 @@
   --tv-color-act-primary-text-hover: var(--tv-base-color-brand); // #191919 主要hover文本色-1
   --tv-color-act-primary-text-active: var(--tv-base-color-brand); // #191919 主要active文本色-1
 
-  --tv-color-act-primary-text-white: var(--tv-base-color-common-1); // #fff 主要文本色-2（白色）
-  --tv-color-act-primary-text-white-hover: var(--tv-base-color-common-1); // #fff 主要hover文本色-2（白色）
-  --tv-color-act-primary-text-white-active: var(--tv-base-color-common-1); // #fff 主要active文本色-2（白色）
+  --tv-color-act-primary-text-inverse-tint: var(--tv-base-color-common-1); // #fff 主要文本色-2（白色）
+  --tv-color-act-primary-text-inverse-tint-hover: var(--tv-base-color-common-1); // #fff 主要hover文本色-2（白色）
+  --tv-color-act-primary-text-inverse-tint-active: var(--tv-base-color-common-1); // #fff 主要active文本色-2（白色）
 
   --tv-color-act-primary-bg: var(--tv-base-color-brand); // #191919 主要背景色-1（品牌色）: 默认
   --tv-color-act-primary-bg-hover: var(--tv-base-color-common-9); // #595959  主要hover背景色-1
@@ -282,7 +282,7 @@
   --tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff  信息hover边框色
   --tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff  信息active边框色
 
-  --tv-color-act-info-plain-text-hover:  var(--tv-base-color-info-6); // #1476ff 
+  --tv-color-act-info-plain-text-hover: var(--tv-base-color-info-6); // #1476ff 
 
   /** 2.4 文本色 **/
   --tv-color-text: var(--tv-base-color-common-11); // #191919 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
@@ -292,25 +292,37 @@
   --tv-color-text-disabled: var(--tv-base-color-common-7); // #c2c2c2  禁用文本色
   --tv-color-text-active: var(--tv-base-color-brand-6); // #1476ff 选中文本色 / 文本高亮色（搜索关键字高亮）
   --tv-color-text-important: var(--tv-base-color-common-11); // #191919 重要文本色-文本_金额
-  --tv-color-text-white: var(--tv-base-color-common-1); // #fff 深色背景上-文本色
   --tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色（链接按钮）
   --tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色
 
   --tv-color-plain-text-hover: var(--tv-base-color-common-11); // #191919
+  // -- 暗色新增 --
+  --tv-color-text-control: var(--tv-base-color-common-11); // #191919 左侧导航默认文本色/主要图标按钮/主要图标+按钮
+  --tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
+  --tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色
+  --tv-color-text-active-1: var(--tv-base-color-common-11); // #191919 卡片式tab页签激活文本色
+  --tv-color-text-active-2: var(--tv-base-color-info-6); // #1476ff  tree选中文本色
+  --tv-color-text-active-3: var(--tv-base-color-common-11); // #191919 tab页签激活色
+  --tv-color-text-inverse-active: var(--tv-base-color-common-1); // #fff buttonGrounp激活色
+  --tv-color-text-hover: var(--tv-base-color-common-11); // #191919 片式tab页签悬浮文本色/深色背景卡片式链接悬浮色
+  --tv-color-text-link-1: var(--tv-base-color-common-11); // #191919  面包屑/主要链接
+  --tv-color-text-link-1-hover: var(--tv-base-color-common-11); // #191919 面包屑/主要链接悬浮色
 
   /** 2.5 图标色 **/
   --tv-color-icon: var(--tv-base-color-common-8); // #808080 默认图标色
   --tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
   --tv-color-icon-active: var(--tv-base-color-common-11); // #191919 图标激活色
   --tv-color-icon-disabled: var(--tv-base-color-common-7); // #c2c2c2  图标禁用色
-  --tv-color-icon-checked-disabled:var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
+  --tv-color-icon-checked-disabled: var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
   --tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
   --tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
   --tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #dbdbdb 控件图标禁用色，主要在checkbox、radio图标激活场景
-  --tv-color-icon-white: var(--tv-base-color-common-1); // #fff 深色背景白色图标
   --tv-color-icon-link: var(--tv-base-color-brand-6); // #1476ff 链接图标色
   --tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
-
+  // -- 暗色新增 --
+  --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-icon-inverse-disabled: var(--tv-base-color-common-1); // #fff 复选框禁用/开个按钮禁用/滑块按钮禁用（此3类场景图标白色部分反色成#999）
 
   /** 2.6 背景色 **/
 
@@ -324,8 +336,8 @@
   --tv-color-bg-gray-2: var(--tv-base-color-common-5); // #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-brand);// #191919; 深色背景色 顶部导航/ 深色tab/深色提示背景色(目前使用的这个色，找设计师确认）
-  --tv-color-bg-active-dark:var(--tv-base-color-common-3);// #f5f5f5 深色背景悬浮色
+  --tv-color-bg-dark: var(--tv-base-color-brand); // #191919; 深色背景色 顶部导航/ 深色tab/深色提示背景色(目前使用的这个色，找设计师确认）
+  --tv-color-bg-active-dark: var(--tv-base-color-common-3); // #f5f5f5 深色背景悬浮色
 
   /* 2.6.2 禁用 */
   --tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色
@@ -339,7 +351,7 @@
   --tv-color-bg-hover-secondary: var(--tv-base-color-common-1); // #fff 次要背景色悬浮色 / 穿梭框头部/折叠面板背景色
   --tv-color-bg-hover-1: var(--tv-base-color-brand-2); // #deecff  浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色
   --tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
-  --tv-color-bg-hover-dark:var(--tv-base-color-common-11); // #191919 深色背景悬浮色 （这个颜色待和设计师确认，原本tab用的#191919）
+  --tv-color-bg-hover-dark: var(--tv-base-color-common-11); // #191919 深色背景悬浮色 （这个颜色待和设计师确认，原本tab用的#191919）
 
   /* 2.6.4 active/选中 */
   --tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5  分页选中背景色/左侧导航选中背景色
@@ -349,6 +361,18 @@
   --tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // #deecff 时间选择选中背景色
   --tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色
 
+  // -- 暗色新增 -- 
+  --tv-color-bg-2: var(--tv-base-color-common-1); // #fff下拉面板/tip背景色
+  --tv-color-bg-3: var(--tv-base-color-common-1); //  #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景
+  --tv-color-bg-4: var(--tv-base-color-common-7); // #c2c2c2 时间线实心圆点
+  --tv-color-bg-progressbar: var(--tv-base-color-success-6); // #5cb300 step当前进度背景色
+  --tv-color-bg-active-emphasize-1: var(--tv-base-color-common-1); // #fff 下拉选中背景色、tab二级选中背景色
+  --tv-color-bg-container-hover: var(--tv-base-color-common-1); // #fff 卡片选中悬浮背景色（区块背景）
+  --tv-color-bg-hover-3: var(--tv-base-color-brand-2); // #deecff 日期悬浮
+  --tv-color-bg-hover-4: var(--tv-base-color-common-1); // #ffffff 表格悬浮/下拉悬浮/左侧导航悬浮
+  --tv-color-bg-active-primary-1: var(--tv-base-color-common-9); // #595959  主要按钮悬浮
+  --tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色：switch/slider按钮控件背景色
+
   /** 2.7 边框色/分割线颜色 **/
 
   /* 2.7.1 边框 */
@@ -364,6 +388,11 @@
   /* 2.7.2 分割线 */
   --tv-color-border-divider: var(--tv-base-color-common-4); // #f0f0f0 分割线1（较长分割线场景）
   --tv-color-border-divider-short: var(--tv-base-color-common-6); // #dbdbdb 分割线2（较短分割线场景）
+  // -- 暗色新增 --
+  --tv-color-border-secondary-hover: var(--tv-base-color-common-7); // #c2c2c2 次要按钮边框悬浮色
+  --tv-color-border-container: var(--tv-base-color-common-4); // #f0f0f0 卡片选择默认边框
+  --tv-color-border-container-hover: var(--tv-base-color-common-1); // #fff 卡片选择悬浮边框
+  --tv-color-border-container-active: var(--tv-base-color-brand-6); //  #1476ff 卡片选择选中边框
 
   /**  3. 字体变量 **/
 

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

@@ -48,15 +48,15 @@
   // 默认按钮选中项禁用时背景色
   --tv-ButtonGroup-item-active-disabled-bg-color: var(--tv-color-bg-disabled-control-checked);
   // 默认按钮选中项文本色
-  --tv-ButtonGroup-item-active-text-color: var(--tv-color-text-white);
+  --tv-ButtonGroup-item-active-text-color: var(--tv-color-text-inverse-active);
   // 默认按钮内间距
   --tv-ButtonGroup-btn-padding-x: 24px;
   // 按钮角标高度
   --tv-ButtonGroup-item-sup-height: 18px;
   // 小尺寸按钮圆角
   --tv-ButtonGroup-mini-border-radius: var(--tv-border-radius-sm);
   // 按钮角标字体颜色
-  --tv-ButtonGroup-item-sup-font-color: var(--tv-color-text-white);
+  --tv-ButtonGroup-item-sup-font-color: var(--tv-color-text-inverse);
   // 按钮角标字体大小
   --tv-ButtonGroup-item-sup-font-size: var(--tv-font-size-default);
 

packages/theme/src/button/vars.less

@@ -92,13 +92,13 @@
   --tv-Button-icon-color-default: var(--tv-color-icon-control);
 
   // primary 主题时按钮文本色
-  --tv-Button-text-color-primary: var(--tv-color-act-primary-text-white);
+  --tv-Button-text-color-primary: var(--tv-color-act-primary-text-inverse-tint);
   // primary 主题时按钮背景色
   --tv-Button-bg-color-primary: var(--tv-color-act-primary-bg);
   // primary 主题时按钮边框色
   --tv-Button-border-color-primary: var(--tv-color-act-primary-border);
   // primary 主题时按钮图标色
-  --tv-Button-icon-color-primary: var(--tv-color-icon-white);
+  --tv-Button-icon-color-primary: var(--tv-color-icon-inverse-tint);
 
   // success 主题时按钮文本色
   --tv-Button-text-color-success: var(--tv-color-act-success-text-white);
@@ -107,7 +107,7 @@
   // success 主题时按钮边框色
   --tv-Button-border-color-success: var(--tv-color-act-success-border);
   // success 主题时按钮图标色
-  --tv-Button-icon-color-success: var(--tv-color-icon-white);
+  --tv-Button-icon-color-success: var(--tv-color-icon-inverse);
 
   // warning 主题时按钮文本色
   --tv-Button-text-color-warning: var(--tv-color-act-warning-text-white);
@@ -116,7 +116,7 @@
   // warning 主题时按钮边框色
   --tv-Button-border-color-warning: var(--tv-color-act-warning-border);
   // warning 主题时按钮图标色
-  --tv-Button-icon-color-warning: var(--tv-color-icon-white);
+  --tv-Button-icon-color-warning: var(--tv-color-icon-inverse);
 
   // danger 主题时按钮文本色
   --tv-Button-text-color-danger: var(--tv-color-act-danger-text-white);
@@ -125,7 +125,7 @@
   // danger 主题时按钮边框色
   --tv-Button-border-color-danger: var(--tv-color-act-danger-border);
   // danger 主题时按钮图标色
-  --tv-Button-icon-color-danger: var(--tv-color-icon-white);
+  --tv-Button-icon-color-danger: var(--tv-color-icon-inverse);
 
   // info 主题时按钮文本色
   --tv-Button-text-color-info: var(--tv-color-act-info-text-white);
@@ -134,7 +134,7 @@
   // info 主题时按钮边框色
   --tv-Button-border-color-info: var(--tv-color-act-info-border);
   // info 主题时按钮图标色
-  --tv-Button-icon-color-info: var(--tv-color-icon-white);
+  --tv-Button-icon-color-info: var(--tv-color-icon-inverse);
 
   // ------------------------------------------------------------- level 1结束 -----------------------------------
 
@@ -220,7 +220,7 @@
   // 默认时按钮激活的背景色
   --tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary); // 现规范，激活态时，只影响边框和背景
   // 默认时按钮激活的边框色
-  --tv-Button-border-color-active-default: var(--tv-color-border);
+  --tv-Button-border-color-active-default: var(--tv-color-border-secondary-hover);
   // 默认时按钮激活的文本
   --tv-Button-text-color-active-default: var(--tv-color-text);
   // 默认时按钮激活的朴素背景色
@@ -237,7 +237,7 @@
   // primary 主题时按钮激活的边框色
   --tv-Button-border-color-active-primary: var(--tv-color-act-primary-border-hover);
   // primary 主题时按钮激活的文本色
-  --tv-Button-text-color-active-primary: var(--tv-color-act-primary-text-white-active);
+  --tv-Button-text-color-active-primary: var(--tv-color-act-primary-text-inverse-tint-active);
   // primary 主题时按钮激活的朴素背景色
   --tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-hover);
   // primary 主题时按钮激活的朴素边框色
@@ -354,7 +354,7 @@
   --tv-Button-margin-right-isicon-svg: var(--tv-space-sm);
 
   // 混排无边框时,文字的颜色
-  --tv-Button-text-color-isicon-ontext: var(--tv-color-text); // 黑色文字
+  --tv-Button-text-color-isicon-ontext: var(--tv-color-text-control); // 黑色文字
   // 混排无边框时,文字的禁用色
   --tv-Button-text-color-isicon-ontext-disabled: var(--tv-color-text-disabled);
   //混排无边框时，字体大小

packages/theme/src/calendar-view/vars.less

@@ -21,7 +21,7 @@
   --tv-CalendarView-radio-font-size: var(--tv-font-size-lg);
   --tv-CalendarView-radio-icon-color: var(--tv-color-icon);
   --tv-CalendarView-radio-active-icon-color: var(--tv-color-icon-active);
-  --tv-CalendarView-radio-active-inner-bg-color: var(--tv-color-icon-white);
+  --tv-CalendarView-radio-active-inner-bg-color: var(--tv-color-bg-inverse);
   --tv-CalendarView-radio-active-border-color: var(--tv-color-border-active);
   --tv-CalendarView-header-main-font-size: var(--tv-font-size-default);
   --tv-CalendarView-header-main-text-color: var(--tv-color-text-weaken);

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

@@ -12,7 +12,7 @@
 
 .inject-CarouselItem-vars() {
   --tv-CarouselItem-title-height: var(--tv-size-height-lg);
-  --tv-CarouselItem-title-text-color: var(--tv-color-text-white);
+  --tv-CarouselItem-title-text-color: var(--tv-color-text-inverse);
   --tv-CarouselItem-title-bg-color: var(--tv-color-bg-primary);
   --tv-CarouselItem-title-span-font-size: var(--tv-font-size-default);
   --tv-CarouselItem-mask-bg-color: var(--tv-color-bg-secondary);

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

@@ -12,7 +12,7 @@
 
 .inject-CascaderNode-vars() {
   // 下拉列表子项的背景色
-  --tv-CascaderNode-hover-bg-color: var(--tv-color-bg, #f5f5f5);
+  --tv-CascaderNode-hover-bg-color: var(--tv-color-bg-hover, #f5f5f5);
   // 下拉列表子项悬浮时的文本色
   --tv-CascaderNode-hover-text-color: var(--tv-color-text, #191919);
   // 下拉列表子项的文本色

packages/theme/src/cascader/vars.less

@@ -38,13 +38,13 @@
   // 禁用状态时的文本色
   --tv-Cascader-disabled-text-color: var(--tv-color-text-disabled, #c2c2c2);
   // 下拉框背景色
-  --tv-Cascader-dropdown-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  --tv-Cascader-dropdown-bg-color: var(--tv-color-bg-2, #ffffff);
   // 输入框标签背景色
   --tv-Cascader-tag-bg-color: var(--tv-color-bg-header, #f0f0f0);
   // 输入框标签的icon图标背景色
   --tv-Cascader-tag-icon-bg-color: var(--tv-color-icon-disabled, #c2c2c2);
   // 输入框标签的icon图标色
-  --tv-Cascader-tag-icon-color: var(--tv-color-icon-white, #fff);
+  --tv-Cascader-tag-icon-color: var(--tv-color-icon-inverse, #fff);
   // 输入框标签的icon图标悬浮时显示的背景色
   --tv-Cascader-tag-icon-hover-bg-color: var(--tv-color-icon, #808080);
   // 下拉列表的文本色（没有生效）

packages/theme/src/crop/vars.less

@@ -14,7 +14,7 @@
   // 弹窗蒙层的背景色，实际为该值的0.5的透明度
   --tv-Crop-modal-bg-color: var(--tv-color-bg-mask);
   // 设置裁剪框在图片正中心加号背景色
-  --tv-Crop-center-bg-color: var(--tv-color-bg-control);
+  --tv-Crop-center-bg-color: var(--tv-color-bg-control-unactive);
   // 弹窗裁剪框的背景色，实际为该值的0.1透明度
   --tv-Crop-face-bg-color: var(--tv-color-bg-secondary);
 }

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

@@ -23,7 +23,7 @@
   // 面板宽度(默认)
   --tv-DatePanel-width: 284px;
   // 面板背景色
-  --tv-DatePanel-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  --tv-DatePanel-bg-color: var(--tv-color-bg-2, #ffffff);
 
   // 面板阴影
   --tv-DatePanel-box-shadow: var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));