Skip to content

Commit

Permalink
refactor(calendar): [calendar] refactor theme vars (#2323)
Browse files Browse the repository at this point in the history 
* refactor(calendar): [calendar] refactor theme vars

* refactor(calendar): [calendar] refactor theme vars
  • Loading branch information
@Youyou-smiles
Youyou-smiles authored Oct 21, 2024
1 parent d0dd390 commit e6c854a
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 75 deletions.
100 changes: 50 additions & 50 deletions packages/theme/src/calendar/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
@popper-prefix-cls: ~'@{css-prefix}popper';

.@{calendar-prefix-cls} {
.component-css-vars-calendar();
.inject-Calendar-vars();

background: var(--ti-calendar-bg-color);
background: var(--tv-Calendar-bg-color);
overflow: hidden;
margin: 10px;

Expand All @@ -37,12 +37,12 @@
}

& &__selected {
border: 1px solid var(--ti-calendar-text-color-primary);
background: var(--ti-calendar-background-color-primary);
border: 1px solid var(--tv-Calendar-text-color-primary);
background: var(--tv-Calendar-day-selected-bg);
padding: 8px;
color: var(--ti-calendar-text-color-info);
color: var(--tv-Calendar-text-color-info);
line-height: 140%;
border-radius: var(--ti-calendar-selected-border-radius);
border-radius: var(--tv-Calendar-selected-border-radius);
margin-bottom: 8px;
}

Expand All @@ -68,19 +68,19 @@
}

& &__input {
width: var(--ti-calendar-tool-width);
width: 104px;
position: relative;
outline: 0;

> input {
width: 100%;
height: var(--ti-calendar-input-height, 28px);
line-height: var(--ti-calendar-input-height, 28px);
border: 1px solid var(--ti-calendar-border-color);
color: var(--ti-calendar-text-color-info);
border-radius: var(--ti-calendar-input-border-radius);
background: var(--ti-calendar-bg-color);
font-size: var(--ti-calendar-input-font-size);
height: 32px;
line-height: 32px;
border: 1px solid #999999;
color: var(--tv-Calendar-text-color-info);
border-radius: var(--tv-Calendar-input-border-radius);
background: var(--tv-Calendar-bg-color);
font-size: var(--tv-Calendar-input-font-size);
padding: 0 30px 0 8px;
display: block;
white-space: nowrap;
Expand All @@ -93,7 +93,7 @@
&:active,
&.active,
&[active] {
border: 1px solid var(--ti-calendar-text-color-primary);
border: 1px solid var(--tv-Calendar-input-hover-border-color);
}

&[readonly] {
Expand All @@ -111,16 +111,16 @@
box-sizing: border-box;
text-align: center;
overflow: hidden;
font-size: var(--ti-common-font-size-base);
font-size: 14px;
display: flex;
align-items: center;
cursor: pointer;

svg {
fill: var(--ti-calendar-text-color-primary);
fill: var(--tv-Calendar-text-color-primary);

&:hover {
fill: var(--ti-calendar-hover-text-color);
fill: var(--tv-Calendar-hover-text-color);
}
}
}
Expand All @@ -132,14 +132,14 @@
> li {
position: relative;
float: left;
width: calc(var(--ti-calendar-tool-width) / 2);
height: var(--ti-calendar-input-height, 28px);
line-height: var(--ti-calendar-input-height, 28px);
border: 1px solid var(--ti-calendar-border-color);
width: 52px;
height: 32px;
line-height: 32px;
border: 1px solid #999999;
text-align: center;
font-size: var(--ti-calendar-input-font-size);
font-size: var(--tv-Calendar-input-font-size);
font-weight: 500;
color: var(--ti-calendar-text-color-info);
color: var(--tv-Calendar-text-color-info);
cursor: pointer;

&:first-child {
Expand All @@ -152,13 +152,13 @@
}

&:hover {
color: var(--ti-calendar-text-color-primary);
color: var(--tv-Calendar-text-color-primary);
}
}

> .active {
color: var(--ti-calendar-text-color-primary);
border: 1px solid var(--ti-calendar-text-color-primary);
color: var(--tv-Calendar-text-color-primary);
border: 1px solid var(--tv-Calendar-text-color-primary);
z-index: 1;
}
}
Expand All @@ -174,7 +174,7 @@
> th {
line-height: 18px;
padding: 0 10px 5px 10px;
font-size: var(--ti-calendar-content-heard-font-size);
font-size: var(--tv-Calendar-content-heard-font-size);
text-align: right;
width: 100% / 7;
}
Expand All @@ -192,46 +192,46 @@
}

& &__day {
border-top: 3px solid var(--ti-calendar-border-color);
border-top: 3px solid #999999;
margin: 0 3px 5px 3px;
height: 100px;
padding: 5px;

&.selected {
background: var(--ti-calendar-background-color-primary);
background: var(--tv-Calendar-day-selected-bg);

.label {
color: var(--ti-calendar-text-color-primary);
color: var(--tv-Calendar-day-selected-text-color);
}
}

&:hover {
background: var(--ti-calendar-background-color-primary);
background: var(--tv-Calendar-day-hover-bg);
}

&.disable {
color: var(--ti-calendar-disabled-text-color);
color: var(--tv-Calendar-disabled-text-color);

.info:before {
background: var(--ti-calendar-disabled-info-bg-color);
background: var(--tv-Calendar-disabled-info-bg-color);
}

.success:before {
background: var(--ti-calendar-disabled-success-bg-color);
background: var(--tv-Calendar-disabled-success-bg-color);
}

.warning:before {
background: var(--ti-calendar-disabled-warning-bg-color);
background: var(--tv-Calendar-disabled-warning-bg-color);
}

.error:before {
background: var(--ti-calendar-disabled-error-bg-color);
background: var(--tv-Calendar-disabled-error-bg-color);
}
}

&.this-month,
&.today {
border-color: var(--ti-calendar-text-color-primary);
border-color: var(--tv-Calendar-text-color-primary);
}
}

Expand All @@ -255,19 +255,19 @@
}

.info:before {
background: var(--ti-calendar-text-color-info);
background: var(--tv-Calendar-text-color-info);
}

.success:before {
background: var(--ti-calendar-bg-color-success);
background: var(--tv-Calendar-bg-color-success);
}

.warning:before {
background: var(--ti-calendar-bg-color-warning);
background: var(--tv-Calendar-bg-color-warning);
}

.error:before {
background: var(--ti-calendar-bg-color-danger);
background: var(--tv-Calendar-bg-color-danger);
}
}

Expand All @@ -279,7 +279,7 @@
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
padding: 5px 0;
font-size: var(--ti-calendar-content-heard-font-size);
font-size: var(--tv-Calendar-content-heard-font-size);
}

&-year {
Expand All @@ -297,30 +297,30 @@
}

& &__selector {
width: var(--ti-calendar-tool-width);
width: 104px;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}

& &__list-item {
min-height: var(--ti-calendar-list-item-height);
line-height: var(--ti-calendar-list-item-height);
min-height: 32px;
line-height: 32px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 8px;
color: var(--ti-calendar-text-color-info);
color: var(--tv-Calendar-text-color-info);

&:hover {
cursor: pointer;
background: var(--ti-calendar-list-item-hover-bg-color);
background: var(--tv-Calendar-list-item-hover-bg-color);
}

&.is-selected {
background: var(--ti-calendar-list-item-selected-bg-color);
color: var(--ti-calendar-list-item-selected-text-color);
background: var(--tv-Calendar-list-item-selected-bg-color);
color: var(--tv-Calendar-list-item-selected-text-color);
}
}
}
72 changes: 47 additions & 25 deletions packages/theme/src/calendar/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,51 @@
*
*/

.component-css-vars-calendar() {
--ti-calendar-bg-color: var(--ti-common-color-light, #ffffff);
--ti-calendar-list-item-selected-text-color: var(--ti-common-color-light, #ffffff);
--ti-calendar-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
--ti-calendar-border-color: var(--ti-common-color-border, #999999);
--ti-calendar-text-color-primary: #1890ff;
--ti-calendar-background-color-primary: rgba(24, 144, 255, 0.1);
--ti-calendar-bg-color-success: var(--ti-common-color-success-normal, #5cb300);
--ti-calendar-bg-color-warning: var(--ti-common-color-warning-normal, #ff8800);
--ti-calendar-bg-color-danger: var(--ti-base-color-bg-8, #c7000b);
--ti-calendar-text-color-info: var(--ti-common-color-info-normal, #191919);
--ti-calendar-tool-width: var(--ti-common-size-width-normal, 104px);
--ti-calendar-content-heard-font-size: var(--ti-common-font-size-1, 14px);
--ti-calendar-input-height: var(--ti-common-size-height-normal, 32px);
--ti-calendar-selected-border-radius: var(--ti-common-border-radius-normal, 6px);
--ti-calendar-input-border-radius: var(--ti-common-border-radius-normal, 6px);
--ti-calendar-input-font-size: var(--ti-common-font-size-base, 14px);
--ti-calendar-list-item-height: var(--ti-common-size-height-normal, 32px);
--ti-calendar-list-item-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
--ti-calendar-list-item-selected-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
--ti-calendar-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
--ti-calendar-disabled-info-bg-color: var(--ti-base-color-bg-5, #ffffff);
--ti-calendar-disabled-success-bg-color: var(--ti-base-color-bg-5, #ffffff);
--ti-calendar-disabled-warning-bg-color: var(--ti-base-color-bg-5, #ffffff);
--ti-calendar-disabled-error-bg-color: var(--ti-base-color-bg-5, #ffffff);
.inject-Calendar-vars() {
// 日历背景颜色
--tv-Calendar-bg-color: var(--tv-color-bg-secondary);
// 日历日期列表选中文字颜色
--tv-Calendar-list-item-selected-text-color: var(--tv-color-text);
// 日历日期常态颜色
--tv-Calendar-text-color-primary: var(--tv-color-icon);
// 日历日期选中颜色
--tv-Calendar-day-selected-text-color: var(--tv-color-text-active);
// 日历日期悬浮颜色
--tv-Calendar-hover-text-color: var(--tv-color-icon-hover);
// 日历日期选中背景颜色
--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-bg-color-success: var(--tv-color-success-bg);
// 日历日期警告背景颜色
--tv-Calendar-bg-color-warning: var(--tv-color-warn-bg);
// 日历日期危险背景颜色
--tv-Calendar-bg-color-danger: var(--tv-color-error-bg);
// 日历日期信息文字颜色
--tv-Calendar-text-color-info: var(--tv-color-info-text-primary);
// 日历表头文字字号
--tv-Calendar-content-heard-font-size: var(--tv-font-size-md);
// 日历表头输入框选项圆角
--tv-Calendar-selected-border-radius: var(--tv-border-radius-md);
// 日历表头输入框圆角
--tv-Calendar-input-border-radius: var(--tv-border-radius-md);
// 日历表头输入框字号
--tv-Calendar-input-font-size: var(--tv-font-size-md);
// 日历输入框hover边框色
--tv-Calendar-input-hover-border-color:var(--tv-color-border-hover) ;
// 日历列次悬浮背景色
--tv-Calendar-list-item-hover-bg-color: var(--tv-color-bg-hover);
// 日历列次悬选中景色
--tv-Calendar-list-item-selected-bg-color: var(--tv-color-bg-active);
// 日历日期禁用文字色
--tv-Calendar-disabled-text-color: var(--tv-color-text-disabled);
// 日历日期禁用信息背景色
--tv-Calendar-disabled-info-bg-color: var(--tv-color-bg-secondary);
// 日历日期禁用成功背景色
--tv-Calendar-disabled-success-bg-color: var(--tv-color-bg-secondary);
// 日历日期禁用警告背景色
--tv-Calendar-disabled-warning-bg-color: var(--tv-color-bg-secondary);
// 日历日期禁用危险背景色
--tv-Calendar-disabled-error-bg-color: var(--tv-color-bg-secondary);
}

0 comments on commit e6c854a

Please sign in to comment.