Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Dec 3, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff97bdf
feat(theme): [button] submit the initial version of aurora-theme-vars
MomoPoppy Dec 3, 2024
ea30b4c
fix(theme): [select] fix multiple components not using the correct sc…
MomoPoppy Dec 3, 2024
28ba701
feat(theme): [button]submit the initial version of aurora-theme-vars
MomoPoppy Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
439 changes: 439 additions & 0 deletions packages/theme/src/base/aurora-theme.less
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/theme/src/base/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,5 @@
@import './reset.less';
@import './vars.less';
// @import './old-theme.less';
// @import './aurora-theme.less';
@import './transition.less';
1 change: 0 additions & 1 deletion packages/theme/src/base/old-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/选中 */
Expand Down
1 change: 0 additions & 1 deletion packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/选中 */
Expand Down
1 change: 0 additions & 1 deletion packages/theme/src/breadcrumb/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
36 changes: 18 additions & 18 deletions packages/theme/src/button/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 主题时按钮激活的朴素文本色
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/calendar/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 日历日期警告背景颜色
Expand Down
7 changes: 6 additions & 1 deletion packages/theme/src/option/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,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);
}
Expand Down
4 changes: 3 additions & 1 deletion packages/theme/src/option/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/pager/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
// 分页页码禁用状态下边框颜色
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/popeditor/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 输入框右侧默认图标行高
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/selected-box/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix syntax error in CSS variable fallback

The correction in --tv-SelectedBox-icon-color-hover adds the missing comma between the variable and fallback value, ensuring proper CSS variable syntax and preventing potential parsing errors.

// 图标尺寸
--tv-SelectedBox-icon-size: var(--tv-icon-size, 16px);

Expand Down
Loading