Skip to content

Commit

Permalink
refactor(theme): [input] refactor textarea theme vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr committed Oct 16, 2024
1 parent 766f054 commit eee96db
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 71 deletions.
75 changes: 37 additions & 38 deletions packages/theme/src/textarea/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@
@input-prefix-cls: ~'@{css-prefix}input';

.@{textarea-prefix-cls} {
.component-css-vars-textarea();
.inject-Textarea-vars();

position: relative;
display: inline-block;
width: 100%;
vertical-align: bottom;
font-size: var(--ti-textarea-font-size);
font-size: var(--tv-Textarea-font-size);

&:before {
content: '';
Expand All @@ -37,7 +37,7 @@
top: 1px;
z-index: 1;
background: #fff;
border-radius: var(--ti-textarea-border-radius);
border-radius: var(--tv-Textarea-border-radius);
}

&:after {
Expand All @@ -49,95 +49,94 @@
bottom: 1px;
z-index: 1;
background: #fff;
border-radius: var(--ti-textarea-border-radius);
border-radius: var(--tv-Textarea-border-radius);
}

&.is-disabled &__inner {
background-color: var(--ti-textarea-disabled-bg-color);
border-color: var(--ti-textarea-border-color);
color: var(--ti-textarea-disabled-text-color);
background-color: var(--tv-Textarea-disabled-bg-color);
border-color: var(--tv-Textarea-border-color);
color: var(--tv-Textarea-disabled-text-color);
cursor: not-allowed;
.placeholder(@color: var(--ti-textarea-placeholder-text-color));
.placeholder(@color: var(--tv-Textarea-placeholder-text-color));
}

&.is-disabled {
background-color: var(--ti-textarea-disabled-bg-color);
background-color: var(--tv-Textarea-disabled-bg-color);

&:before {
background-color: var(--ti-textarea-disabled-bg-color);
background-color: var(--tv-Textarea-disabled-bg-color);
}

&:after {
background-color: var(--ti-textarea-disabled-bg-color);
background-color: var(--tv-Textarea-disabled-bg-color);
}

&:hover {
border-color: var(--ti-textarea-border-color);
border-color: var(--tv-Textarea-border-color);
}
}

&.is-exceed {
.@{textarea-prefix-cls}__inner {
border-color: var(--ti-textarea-exceed-text-color);
border-color: var(--tv-Textarea-exceed-text-color);
}

.@{input-prefix-cls}__count {
color: var(--ti-textarea-exceed-text-color);
color: var(--tv-Textarea-exceed-text-color);

&-text-length {
color: var(--ti-textarea-exceed-text-color);
color: var(--tv-Textarea-exceed-text-color);
}
}
}

.@{input-prefix-cls}__count {
color: var(--ti-textarea-count-color);
background: var(--ti-textarea-bg-color);
font-size: var(--ti-textarea-count-font-size);
color: var(--tv-Textarea-count-color);
background: var(--tv-Textarea-bg-color);
font-size: var(--tv-Textarea-count-font-size);
text-align: right;
position: absolute;
z-index: 2;
line-height: 1.5;
bottom: var(--ti-textarea-count-bottom);
right: var(--ti-textarea-count-right);
width: var(--ti-textarea-count-width);
border-bottom-left-radius: var(--ti-textarea-count-border-radius);
padding-right: var(--ti-textarea-count-padding-right);
bottom: 1px;
right: var(--tv-Textarea-count-right);
width: calc(100% - 17px);
border-bottom-left-radius: var(--tv-Textarea-count-border-radius);
padding-right: var(--tv-Textarea-count-padding-right);

&-text-length {
color: var(--ti-textarea-count-text-length-color);
color: var(--tv-Textarea-count-text-length-color);
}
}

&__inner {
display: block;
width: var(--ti-textarea-inner-width);
width: 100%;
min-height: 60px;
min-height: calc(var(--ti-textarea-height, 30px) * 2);
color: var(--ti-textarea-text-color);
border: 1px solid var(--ti-textarea-border-color);
border-radius: var(--ti-textarea-border-radius);
background: var(--ti-textarea-bg-color);
padding: var(--ti-textarea-padding-vertical) var(--ti-textarea-padding-horizontal);
padding-bottom: var(--ti-textarea-padding-bottom);
min-height: calc(var(--tv-Textarea-height, 30px) * 2);
color: var(--tv-Textarea-text-color);
border: 1px solid var(--tv-Textarea-border-color);
border-radius: var(--tv-Textarea-border-radius);
background: var(--tv-Textarea-bg-color);
padding: var(--tv-Textarea-padding-y) var(--tv-Textarea-padding-x);
padding-bottom: var(--tv-Textarea-padding-bottom);
line-height: 1.5;
font-size: var(--ti-textarea-font-size);
font-family: var(--ti-textarea-font-family);
font-size: var(--tv-Textarea-font-size);
resize: vertical;
box-sizing: border-box;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
.placeholder(@color: var(--ti-textarea-placeholder-text-color));
.placeholder(@color: var(--tv-Textarea-placeholder-text-color));

&:hover {
border-color: var(--ti-textarea-inner-hover-border-color);
border-color: var(--tv-Textarea-inner-hover-border-color);
}

&:focus {
border-color: var(--ti-textarea-inner-active-border-color);
border-color: var(--tv-Textarea-inner-active-border-color);
}

.@{textarea-prefix-cls}:has(&:focus) {
border-color: var(--ti-textarea-active-border-color);
border-color: var(--tv-Textarea-active-border-color);
}

&:hover,
Expand Down
58 changes: 25 additions & 33 deletions packages/theme/src/textarea/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,61 +10,53 @@
*
*/

.component-css-vars-textarea() {
.inject-Textarea-vars() {
// 文本域文本颜色
--ti-textarea-text-color: var(--ti-common-color-text-primary, #191919);
--tv-Textarea-text-color: var(--tv-color-text);
// 文本域背景颜色
--ti-textarea-bg-color: var(--ti-common-color-icon-white, #fff);
--tv-Textarea-bg-color: var(--tv-color-bg-secondary);
// 文本域字体大小
--ti-textarea-font-size: var(--ti-common-font-size-base, 14px);
--tv-Textarea-font-size: var(--tv-font-size-md);
// 文本域计数器字体大小
--ti-textarea-count-font-size: var(--ti-common-font-size-0, 12px);
--tv-Textarea-count-font-size: var(--tv-font-size-sm);
// 文本域高度
--ti-textarea-height: var(--ti-common-size-height-normal, 32px);
--tv-Textarea-height: var(--tv-size-height-md);
// 文本域边框圆角
--ti-textarea-border-radius: var(--ti-common-border-radius-normal, 6px);
--tv-Textarea-border-radius: var(--tv-border-radius-md);
// 文本域边框色
--ti-textarea-border-color: var(--ti-common-color-line-normal, #c2c2c2);
--tv-Textarea-border-color: var(--tv-color-border);
// 文本域内层hover时显示的边框颜色
--ti-textarea-inner-hover-border-color: var(--ti-common-color-border-hover, #191919);
--tv-Textarea-inner-hover-border-color: var(--tv-color-border-hover);
// 文本域内层active时显示的边框颜色
--ti-textarea-inner-active-border-color: var(--ti-common-color-line-active, #191919);
--tv-Textarea-inner-active-border-color: var(--tv-color-border-active);
// 文本域占位符文本颜色
--ti-textarea-placeholder-text-color: var(--ti-common-color-text-weaken, #808080);
--tv-Textarea-placeholder-text-color: var(--tv-color-text-placeholder);
// 文本域disabled时的文本颜色
--ti-textarea-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
--tv-Textarea-disabled-text-color: var(--tv-color-text-disabled);
// 文本域disabled时的背景颜色
--ti-textarea-disabled-bg-color: #f2f2f2;
--tv-Textarea-disabled-bg-color: var(--tv-color-bg-disabled);
// 文本域exceed时的文本颜色
--ti-textarea-exceed-text-color: #c7000b;
--tv-Textarea-exceed-text-color: var(--tv-color-error-text);
// 计数器的颜色
--ti-textarea-count-color: var(--ti-common-color-text-weaken, #808080);
--tv-Textarea-count-color: var(--tv-color-text-weaken);
// 文本框垂直方向内边距
--ti-textarea-padding-vertical: var(--ti-common-space-2x, 8px);
--tv-Textarea-padding-y: var(--tv-space-md);
// 文本框水平方向内边距
--ti-textarea-padding-horizontal: var(--ti-common-space-3x, 12px);
--tv-Textarea-padding-x: var(--tv-space-lg);
// 文本框右侧内边距
--ti-textarea-padding-right: var(--ti-common-space-base, 4px);
--tv-Textarea-padding-right: var(--tv-space-sm);
// 文本框底部内边距
--ti-textarea-padding-bottom: var(--ti-common-space-4x, 16px);
// 计数器底部距离
--ti-textarea-count-bottom: 1px;
--tv-Textarea-padding-bottom: var(--tv-space-xl);
// 计数器右侧距离
--ti-textarea-count-right: var(--ti-common-font-size-2, 16px);
--tv-Textarea-count-right: var(--tv-space-xl);
// 文本域active时显示的边框颜色
--ti-textarea-active-border-color: var(--ti-common-color-line-active, #191919);
// 计数器宽度
--ti-textarea-count-width: calc(100% - 17px);
// 文本域宽度
--ti-textarea-inner-width: 100%;
--tv-Textarea-active-border-color: var(--tv-color-border-active);
// 计数器圆角
--ti-textarea-count-border-radius: var(--ti-common-border-radius-3, 6px);
--tv-Textarea-count-border-radius: var(--tv-border-radius-md);
// 计数器文本字数颜色
--ti-textarea-count-text-length-color: var(--ti-common-color-text-primary, #191919);
--tv-Textarea-count-text-length-color: var(--tv-color-text);
// 计数器右侧内边距
--ti-textarea-count-padding-right: var(--ti-common-space-base, 4px);
// 文本框字体
--ti-textarea-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
--tv-Textarea-count-padding-right: var(--tv-space-sm);
// 计数器行高
--ti-textarea-count-line-height: var(--ti-textarea-count-font-size);
--tv-Textarea-count-line-height: var(--tv-Textarea-count-font-size);
}

0 comments on commit eee96db

Please sign in to comment.