feat(theme): [button] submit the initial version of aurora-theme-vars (…

…#2596) * feat(theme): [button] submit the initial version of aurora-theme-vars * fix(theme): [select] fix multiple components not using the correct scene common variable * feat(theme): [button]submit the initial version of aurora-theme-vars
opentiny · Dec 3, 2024 · da4f7fa · da4f7fa
1 parent ab2d0c8
commit da4f7fa
Show file tree

Hide file tree

Showing 12 changed files with 472 additions and 28 deletions.
diff --git a/packages/theme/src/base/aurora-theme.less b/packages/theme/src/base/aurora-theme.less
diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less
@@ -13,4 +13,5 @@
 @import './reset.less';
 @import './vars.less';
 // @import './old-theme.less';
+// @import './aurora-theme.less';
 @import './transition.less';
diff --git a/packages/theme/src/base/old-theme.less b/packages/theme/src/base/old-theme.less
@@ -337,7 +337,6 @@
   --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 深色背景悬浮色
 
   /* 2.6.4 active/选中 */

diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less
@@ -339,7 +339,6 @@
   --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-3: var(--tv-base-color-brand-1); // #f0f7ff 悬浮背景色
   --tv-color-bg-hover-dark:var(--tv-base-color-common-11); // #191919 深色背景悬浮色 （这个颜色待和设计师确认，原本tab用的#191919）
 
   /* 2.6.4 active/选中 */

diff --git a/packages/theme/src/breadcrumb/index.less b/packages/theme/src/breadcrumb/index.less
@@ -69,7 +69,6 @@
   }
 
   & &__separator {
-    font-family: var(--tv-Breadcrumb-font-family);
     color: var(--tv-Breadcrumb-separator-icon-color);
     margin: var(--tv-Breadcrumb-separator-margin-y) var(--tv-Breadcrumb-separator-margin-x);
     vertical-align: middle;

diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
@@ -233,64 +233,64 @@
   --tv-Button-border-color-ghost-active-default: var(--tv-color-border-ghost-active);
 
   // primary 主题时按钮激活的背景色
-  --tv-Button-bg-color-active-primary: var(--tv-color-act-primary-bg-active);
+  --tv-Button-bg-color-active-primary: var(--tv-color-act-primary-bg-hover);
   // primary 主题时按钮激活的边框色
-  --tv-Button-border-color-active-primary: var(--tv-color-act-primary-border-active);
+  --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);
   // primary 主题时按钮激活的朴素背景色
-  --tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active);
+  --tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-hover);
   // primary 主题时按钮激活的朴素边框色
-  --tv-Button-border-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active); // 无边框
+  --tv-Button-border-color-plain-active-primary: var(--tv-color-act-primary-bg-white-hover); // 无边框
   // primary 主题时按钮激活的朴素文本色
   --tv-Button-text-color-plain-active-primary: var(--tv-color-act-primary-plain-text-hover);
   // primary 主题时按钮激活的幽灵边框色
   --tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-plain-text-hover);
 
   // success 主题时按钮激活的背景色
-  --tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-active);
+  --tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-hover);
   // success 主题时按钮激活的边框色
-  --tv-Button-border-color-active-success: var(--tv-color-act-success-border-active);
+  --tv-Button-border-color-active-success: var(--tv-color-act-success-border-hover);
   // success 主题时按钮激活的文本色
   --tv-Button-text-color-active-success: var(--tv-color-act-success-text-white-active);
   // success 主题时按钮激活的朴素背景色
-  --tv-Button-bg-color-plain-active-success: var(--tv-color-act-success-bg-light-active);
+  --tv-Button-bg-color-plain-active-success: var(--tv-color-act-success-bg-light-hover);
   // success 主题时按钮激活的朴素边框色
-  --tv-Button-border-color-plain-active-success: var(--tv-color-act-success-bg-light-active); // 无边框
+  --tv-Button-border-color-plain-active-success: var(--tv-color-act-success-bg-light-hover); // 无边框
   // success 主题时按钮激活的朴素文本色
   --tv-Button-text-color-plain-active-success: var(--tv-color-act-success-plain-text-hover);
   // success 主题时按钮激活的幽灵边框色
-  --tv-Button-border-color-ghost-active-success: var(--tv-color-act-success-border-active-1);
+  --tv-Button-border-color-ghost-active-success: var(--tv-color-act-success-border-hover-1);
 
   // warning 主题时按钮激活的背景色
   --tv-Button-bg-color-active-warning: var(--tv-color-act-warning-bg-active);
   // warning 主题时按钮激活的边框色
-  --tv-Button-border-color-active-warning: var(--tv-color-act-warning-border-active);
+  --tv-Button-border-color-active-warning: var(--tv-color-act-warning-border-hover);
   // warning 主题时按钮激活的文本色
   --tv-Button-text-color-active-warning: var(--tv-color-act-warning-text-white-active);
   // warning 主题时按钮激活的朴素背景色
-  --tv-Button-bg-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active);
+  --tv-Button-bg-color-plain-active-warning: var(--tv-color-act-warning-bg-light-hover);
   // warning 主题时按钮激活的朴素边框色
-  --tv-Button-border-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active); // 无边框
+  --tv-Button-border-color-plain-active-warning: var(--tv-color-act-warning-bg-light-hover); // 无边框
   // warning 主题时按钮激活的朴素文本色
   --tv-Button-text-color-plain-active-warning: var(--tv-color-act-warning-plain-text-hover);
   // warning 主题时按钮激活的幽灵边框色
   --tv-Button-border-color-ghost-active-warning: var(--tv-color-act-warning-border-active-1);
 
   // danger 主题时按钮激活的背景色
-  --tv-Button-bg-color-active-danger: var(--tv-color-act-danger-bg-active);
+  --tv-Button-bg-color-active-danger: var(--tv-color-act-danger-bg-hover);
   // danger 主题时按钮激活的边框色
-  --tv-Button-border-color-active-danger: var(--tv-color-act-danger-border-active);
+  --tv-Button-border-color-active-danger: var(--tv-color-act-danger-border-hover);
   // danger 主题时按钮激活的文本色
   --tv-Button-text-color-active-danger: var(--tv-color-act-danger-text-white-active);
   // danger 主题时按钮激活的朴素背景色
-  --tv-Button-bg-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active);
+  --tv-Button-bg-color-plain-active-danger: var(--tv-color-act-danger-bg-light-hover);
   // danger 主题时按钮激活的朴素边框色
-  --tv-Button-border-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active);
+  --tv-Button-border-color-plain-active-danger: var(--tv-color-act-danger-bg-light-hover);
   // danger 主题时按钮激活的朴素文本色
   --tv-Button-text-color-plain-active-danger: var(--tv-color-act-danger-plain-text-hover);
   // danger 主题时按钮激活的幽灵边框色
-  --tv-Button-border-color-ghost-active-danger: var(--tv-color-act-danger-border-active-1);
+  --tv-Button-border-color-ghost-active-danger: var(--tv-color-act-danger-border-hover-1);
 
   // info 主题时按钮激活的背景色
   --tv-Button-bg-color-active-info: var(--tv-color-act-info-bg-active);
@@ -299,7 +299,7 @@
   // info 主题时按钮激活的文本色
   --tv-Button-text-color-active-info: var(--tv-color-act-info-text-white-active);
   // info 主题时按钮激活的朴素背景色
-  --tv-Button-bg-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
+  --tv-Button-bg-color-plain-active-info: var(--tv-color-act-info-bg-light-hover);
   // info 主题时按钮激活的朴素边框色
   --tv-Button-border-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
   // info 主题时按钮激活的朴素文本色

diff --git a/packages/theme/src/calendar/vars.less b/packages/theme/src/calendar/vars.less
@@ -24,7 +24,7 @@
   // 日历日期选中背景颜色
   --tv-Calendar-day-selected-bg: var(--tv-color-bg-active-emphasize-light);
   // 日历日期悬浮背景颜色
-  --tv-Calendar-day-hover-bg: var(--tv-color-bg-hover-3);
+  --tv-Calendar-day-hover-bg: var(--tv-color-bg-hover);
   // 日历日期成功背景颜色
   --tv-Calendar-bg-color-success: var(--tv-color-success-bg);
   // 日历日期警告背景颜色

diff --git a/packages/theme/src/option/index.less b/packages/theme/src/option/index.less
@@ -94,9 +94,14 @@
     cursor: not-allowed;
 
     .tiny-svg {
-      fill: var(--tv-Option-icon-color-checked-disabled);
+      &.checked-sur,
+      &.halfselect {
+        fill: var(--tv-Option-icon-color-checked-disabled);
+      }
 
       &.check {
+        fill: var(--tv-Option-icon-color-unchecked-disabled); /* #bfbfbf */
+
         path:first-of-type {
           fill: var(--tv-Option-icon-bg-color-disabled);
         }

diff --git a/packages/theme/src/option/vars.less b/packages/theme/src/option/vars.less
@@ -30,8 +30,10 @@
   --tv-Option-icon-color-unchecked: var(--tv-color-border, #c2c2c2);
   // 复选框选中色
   --tv-Option-icon-color-checked: var(--tv-color-icon-control-active, #1476ff);
-  // 复选框禁用色
+  // 复选框禁用色（选中）
   --tv-Option-icon-color-checked-disabled: var(--tv-color-icon-checked-disabled, #dbdbdb);
+  // 复选框禁用色(未选中）
+  --tv-Option-icon-color-unchecked-disabled: var(--tv-color-icon-control-disabled, #dbdbdb);
   // 复选框未选中项禁用背景色
   --tv-Option-icon-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
 

diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
@@ -52,9 +52,9 @@
   --tv-Pager-min-width-xs: 24px;
   // -------分页页码相关样式-------
   // 分页页码选中时背景色
-  --tv-Pager-page-item-bg-color-active: var(--tv-color-bg);
+  --tv-Pager-page-item-bg-color-active: var(--tv-color-bg-active);
   // 分页页码悬浮时背景色
-  --tv-Pager-page-item-bg-color-hover: var(--tv-color-bg);
+  --tv-Pager-page-item-bg-color-hover: var(--tv-color-bg-hover);
   // 分页页码边框颜色
   --tv-Pager-page-item-border-color: transparent;
   // 分页页码禁用状态下边框颜色

diff --git a/packages/theme/src/popeditor/vars.less b/packages/theme/src/popeditor/vars.less
@@ -20,7 +20,7 @@
   // 输入框右侧默认图标悬浮色
   --tv-Popeditor-icon-color-hover: var(--tv-color-icon-hover);
   // 输入框右侧默认图标字号
-  --tv-Popeditor-icon-font-size: var(--tv-font-size-default);
+  --tv-Popeditor-icon-font-size: var(--tv-icon-size);
   // 输入框右侧默认图标高度
   --tv-Popeditor-icon-height: var(--tv-size-height-md);
   // 输入框右侧默认图标行高

diff --git a/packages/theme/src/selected-box/vars.less b/packages/theme/src/selected-box/vars.less
@@ -25,7 +25,7 @@
   // 图标色
   --tv-SelectedBox-icon-color: var(--tv-color-icon, #808080);
   // 图标悬浮色
-  --tv-SelectedBox-icon-color-hover: var(--tv-color-icon-hover#191919);
+  --tv-SelectedBox-icon-color-hover: var(--tv-color-icon-hover, #191919);
   // 图标尺寸
   --tv-SelectedBox-icon-size: var(--tv-icon-size, 16px);