From 3211ec26a02771bea1fe7ae2390af79119edccb3 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Sat, 25 Feb 2023 15:11:06 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(button):=20=E6=8C=89=E9=92=AE=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/button/index.js | 48 +++++++-------- src/button/index.less | 136 ++++++++++++++++++++++-------------------- src/button/vars.less | 46 +++++++------- 3 files changed, 119 insertions(+), 111 deletions(-) diff --git a/src/button/index.js b/src/button/index.js index a74fe17..63a8cea 100644 --- a/src/button/index.js +++ b/src/button/index.js @@ -1,25 +1,25 @@ export default { - 'tiny-mobile-button-height': '44px', - 'tiny-mobile-button-font-size': '16px', - 'tiny-mobile-button-color': '#fff', - 'tiny-mobile-button-disabled-color': '#ddd', - 'tiny-mobile-button-default-color': '#666', - 'tiny-mobile-button-default-border-color': '#ccc', - 'tiny-mobile-button-default-bgcolor': '#fff', - 'tiny-mobile-button-primary-color': '#039be5', - 'tiny-mobile-button-success-color': '#52c41a', - 'tiny-mobile-button-warning-color': '#faad14', - 'tiny-mobile-button-danger-color': '#f04b3d', - 'tiny-mobile-button-info-color': '#333', - 'tiny-mobile-button-medium-height': '36px', - 'tiny-mobile-button-medium-font-size': '14px', - 'tiny-mobile-button-small-height': '30px', - 'tiny-mobile-button-small-font-size': '14px', - 'tiny-mobile-button-mini-height': '24px', - 'tiny-mobile-button-mini-font-size': '12px', - 'tiny-mobile-button-radius': '2px', - 'tiny-mobile-button-text-color': '#1890ff', - 'tiny-mobile-button-text-hover-color': '#40a9ff', - 'tiny-mobile-button-text-active-color': '#096dd9', - 'tiny-mobile-button-text-disabled-color': '#999' -} + "tiny-mobile-button-height": "42px", + "tiny-mobile-button-font-size-default": "16px", + "tiny-mobile-button-text-color-white": "#fff", + "tiny-mobile-button-text-color-disabled": "#dbdbdb", + "tiny-mobile-button-text-color-default": "#191919", + "tiny-mobile-button-border-color": "#dbdbdb", + "tiny-mobile-button-bg-color-default": "#fff", + "tiny-mobile-button-bg-color-primary": "#4a79fe", + "tiny-mobile-button-bg-color-success": "#52c41a", + "tiny-mobile-button-bg-color-warning": "#faad14", + "tiny-mobile-button-bg-color-danger": "#f04b3d", + "tiny-mobile-button-bg-color-disabled": "#e8e8e8", + "tiny-mobile-button-bg-color-info": "#333", + "tiny-mobile-button-height-medium": "36px", + "tiny-mobile-button-font-size-medium": "14px", + "tiny-mobile-button-height-small": "28px", + "tiny-mobile-button-font-size-small": "12px", + "tiny-mobile-button-height-mini": "22px", + "tiny-mobile-button-font-size-mini": "10px", + "tiny-mobile-button-radius": "2px", + "tiny-mobile-button-text-color": "#4a79fe", + "tiny-mobile-button-text-color-hover": "#6e94fe", + "tiny-mobile-button-text-color-active": "#4a79fe", +}; diff --git a/src/button/index.less b/src/button/index.less index 88ac360..5e6b3c0 100644 --- a/src/button/index.less +++ b/src/button/index.less @@ -21,14 +21,14 @@ position: relative; margin: 0; padding: 0; - height: var(--ti-mobile-button-height, 44px); - line-height: var(--ti-mobile-button-height, 44px); - font-size: var(--ti-mobile-button-font-size, 16px); + height: var(--ti-mobile-button-height, 42px); + line-height: var(--ti-mobile-button-height, 42px); + font-size: var(--ti-mobile-button-font-size-default, 16px); -webkit-text-size-adjust: 100%; border-width: 1px; border-style: solid; border-image: initial; - border-radius: var(--ti-mobile-button-radius, 2px); + border-radius: 2px; padding: 0 16px; transition: border 0.3s ease 0s, color 0.3s ease 0s, background 0.3s ease 0s; cursor: pointer; @@ -72,31 +72,27 @@ &.is-disabled:active, &.is-disabled.is-active { cursor: not-allowed; - .button-color( - var(--ti-mobile-button-color, #fff), - var(--ti-mobile-button-disabled-color, #ddd), - var(--ti-mobile-button-disabled-color, #ddd) - ); + .button-color(var(--ti-mobile-button-text-color-disabled, #dbdbdb), + var(--ti-mobile-button-bg-color-disabled, #e8e8e8), + var(--ti-mobile-button-bg-color-disabled, #e8e8e8)); } .is-icon { - fill: var(--ti-mobile-button-color, #fff); - font-size: var(--ti-mobile-button-font-size, 16px); + fill: var(--ti-mobile-button-text-color-white, #fff); + font-size: var(--ti-mobile-button-font-size-default, 16px); } &--default { - .button-color( - var(--ti-mobile-button-default-color, #666), - var(--ti-mobile-button-default-border-color, #ccc), - var(--ti-mobile-button-default-bgcolor, #fff) - ); + .button-color(var(--ti-mobile-button-text-color-default, #191919), + var(--ti-mobile-button-border-color, #dbdbdb), + var(--ti-mobile-button-bg-color-default, #fff)); .is-icon { - fill: var(--ti-mobile-button-default-color, #666); + fill: var(--ti-mobile-button-text-color-default, #666); } &.is-disabled .is-icon { - fill: var(--ti-mobile-button-color, #fff); + fill: var(--ti-mobile-button-text-color-white, #fff); } } @@ -107,92 +103,104 @@ } &--primary { - .button-type( - var(--ti-mobile-button-color, #fff), - var(--ti-mobile-button-primary-color, #039be5) - ); + .button-type(var(--ti-mobile-button-text-color-white, #fff), + var(--ti-mobile-button-bg-color-primary, #4a79fe)); &.is-plain { - .button-plain(var(--ti-mobile-button-primary-color, #039be5)); + .button-plain(var(--ti-mobile-button-bg-color-primary, #4a79fe)); } } &--success { - .button-type( - var(--ti-mobile-button-color, #fff), - var(--ti-mobile-button-success-color, #52c41a) - ); + .button-type(var(--ti-mobile-button-text-color-white, #fff), + var(--ti-mobile-button-bg-color-success, #52c41a)); &.is-plain { - .button-plain(var(--ti-mobile-button-success-color, #52c41a)); + .button-plain(var(--ti-mobile-button-bg-color-success, #52c41a)); } } &--warning { - .button-type( - var(--ti-mobile-button-color, #fff), - var(--ti-mobile-button-warning-color, #faad14) - ); + .button-type(var(--ti-mobile-button-text-color-white, #fff), + var(--ti-mobile-button-bg-color-warning, #faad14)); &.is-plain { - .button-plain(var(--ti-mobile-button-warning-color, #faad14)); + .button-plain(var(--ti-mobile-button-bg-color-warning, #faad14)); } } &--danger { - .button-type( - var(--ti-mobile-button-color, #fff), - var(--ti-mobile-button-danger-color, #f04b3d) - ); + .button-type(var(--ti-mobile-button-text-color-white, #fff), + var(--ti-mobile-button-bg-color-danger, #f04b3d)); &.is-plain { - .button-plain(var(--ti-mobile-button-danger-color, #f04b3d)); + .button-plain(var(--ti-mobile-button-bg-color-danger, #f04b3d)); } } &--info { - .button-type( - var(--ti-mobile-button-color, #fff), - var(--ti-mobile-button-info-color, #333) - ); + .button-type(var(--ti-mobile-button-text-color-white, #fff), + var(--ti-mobile-button-bg-color-info, #333)); &.is-plain { - .button-plain(var(--ti-mobile-button-info-color, #333)); + .button-plain(var(--ti-mobile-button-bg-color-info, #333)); } } &--text { - .button-text( - var(--ti-mobile-button-text-color, #1890ff), - var(--ti-mobile-button-text-hover-color, #40a9ff), - var(--ti-mobile-button-text-active-color, #096dd9), - var(--ti-mobile-button-text-disabled-color, #999) - ); + .button-text(var(--ti-mobile-button-text-color, #4a79fe), + var(--ti-mobile-button-text-color-hover, #6e94fe), + var(--ti-mobile-button-text-color-active, #4a79fe), + var(--ti-mobile-button-text-color-disabled, #dbdbdb)); + } + + &--secondary { + .button-type(var(--ti-mobile-button-text-color-default, #191919), + var(--ti-mobile-button-bg-color-secondary, #f5f5f5)); + + &.is-plain { + .button-plain(var(--ti-mobile-button-bg-color-secondary, #f5f5f5)); + } + } + + &--default { + .button-color(var(--ti-mobile-button-text-color-default, #191919), + var(--ti-mobile-button-text-color-disabled, #dbdbdb), + var(--ti-mobile-button-text-color-white, #fff)); + + &.is-disabled { + .button-color(var(--ti-mobile-button-text-color-disabled, #dbdbdb), + var(--ti-mobile-button-text-color-disabled, #dbdbdb), + var(--ti-mobile-button-bg-color-white, #fff)); + } } &--large { - width: 100%; + padding: 0 20px; } &--medium { - .button-size( - var(--ti-mobile-button-medium-height, 36px), - var(--ti-mobile-button-medium-font-size, 14px) - ); + padding: 0 16px; + line-height: 36px; + + .button-size(var(--ti-mobile-button-height-medium, 36px), + var(--ti-mobile-button-font-size-medium, 14px)); } &--small { - .button-size( - var(--ti-mobile-button-small-height, 30px), - var(--ti-mobile-button-small-font-size, 14px) - ); + padding: 0 12px; + line-height: 28px; + + .button-size(var(--ti-mobile-button-height-small, 28px), + var(--ti-mobile-button-font-size-small, 12px)); } &--mini { - .button-size( - var(--ti-mobile-button-mini-height, 24px), - var(--ti-mobile-button-mini-font-size, 12px) - ); + padding: 0 8px; + line-height: 22px; + + .button-size(var(--ti-mobile-button-height-mini, 22px), + var(--ti-mobile-button-font-size-mini, 10px)); } &.is-loading { @@ -200,8 +208,8 @@ pointer-events: none; svg { - fill: var(--ti-mobile-button-color, #fff); - font-size: var(--ti-mobile-button-font-size, 16px); + fill: var(--ti-mobile-button-text-color-white, #fff); + font-size: var(--ti-mobile-button-font-size-default, 16px); } } diff --git a/src/button/vars.less b/src/button/vars.less index a7c19db..d929a0f 100644 --- a/src/button/vars.less +++ b/src/button/vars.less @@ -1,25 +1,25 @@ :root { - --ti-mobile-button-height: 44px; - --ti-mobile-button-font-size: 16px; - --ti-mobile-button-color: var(--ti-mobile-base-color-light, #fff); - --ti-mobile-button-disabled-color: #ddd; - --ti-mobile-button-default-color: var(--ti-mobile-base-color-secondary, #666); - --ti-mobile-button-default-border-color: #ccc; - --ti-mobile-button-default-bgcolor: var(--ti-mobile-base-color-light, #fff); - --ti-mobile-button-primary-color: #039be5; - --ti-mobile-button-success-color: #52c41a; - --ti-mobile-button-warning-color: #faad14; - --ti-mobile-button-danger-color: #f04b3d; - --ti-mobile-button-info-color: var(--ti-mobile-base-color-info-normal, #333); - --ti-mobile-button-medium-height: var(--ti-mobile-base-size-height-small, 36px); - --ti-mobile-button-medium-font-size: 14px; - --ti-mobile-button-small-height: var(--ti-mobile-base-size-height-minor, 30px); - --ti-mobile-button-small-font-size: 14px; - --ti-mobile-button-mini-height: var(--ti-mobile-base-size-height-mini, 24px); - --ti-mobile-button-mini-font-size: var(--ti-mobile-base-font-size, 12px); - --ti-mobile-button-radius: var(--ti-mobile-base-radius-medium, 2px); - --ti-mobile-button-text-color: var(--ti-mobile-base-color-primary-normal, #1890ff); - --ti-mobile-button-text-hover-color: var(--ti-mobile-base-color-primary-hover, #40a9ff); - --ti-mobile-button-text-active-color: var(--ti-mobile-base-color-primary-active, #096dd9); - --ti-mobile-button-text-disabled-color: var(--ti-mobile-base-color-placeholder, #999); + --ti-mobile-button-height: 42px; + --ti-mobile-button-font-size-default: 16px; + --ti-mobile-button-text-color-white: #fff; + --ti-mobile-button-text-color-disabled: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb); + --ti-mobile-button-text-color-default: var(--ti-mobile-common-color-text-primary, #191919); + --ti-mobile-button-border-color: #dbdbdb; + --ti-mobile-button-bg-color-default: #fff; + --ti-mobile-button-bg-color-primary: var(--ti-mobile-common-color-link-highlight, #4a79fe); + --ti-mobile-button-bg-color-success: #52c41a; + --ti-mobile-button-bg-color-warning: #faad14; + --ti-mobile-button-bg-color-danger: #f04b3d; + --ti-mobile-button-bg-color-disabled: #e8e8e8; + --ti-mobile-button-bg-color-info: #333; + --ti-mobile-button-height-medium: 36px; + --ti-mobile-button-font-size-medium: 14px; + --ti-mobile-button-height-small: 28px; + --ti-mobile-button-font-size-small: 12px; + --ti-mobile-button-height-mini: 22px; + --ti-mobile-button-font-size-mini: 10px; + --ti-mobile-button-radius: 2px; + --ti-mobile-button-text-color: var(--ti-mobile-common-color-link-highlight, #4a79fe); + --ti-mobile-button-text-color-hover: #6e94fe; + --ti-mobile-button-text-color-active: var(--ti-mobile-common-color-link-highlight, #4a79fe); } From 759a734f943b938452dbb32fde355be9608e1267 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Sat, 25 Feb 2023 17:59:27 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(button):=20=E6=8C=89=E9=92=AE=E6=9C=AA?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=AE=9A=E4=B9=89=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/button/index.js | 1 - src/button/vars.less | 1 - 2 files changed, 2 deletions(-) diff --git a/src/button/index.js b/src/button/index.js index 63a8cea..811e1e4 100644 --- a/src/button/index.js +++ b/src/button/index.js @@ -18,7 +18,6 @@ export default { "tiny-mobile-button-font-size-small": "12px", "tiny-mobile-button-height-mini": "22px", "tiny-mobile-button-font-size-mini": "10px", - "tiny-mobile-button-radius": "2px", "tiny-mobile-button-text-color": "#4a79fe", "tiny-mobile-button-text-color-hover": "#6e94fe", "tiny-mobile-button-text-color-active": "#4a79fe", diff --git a/src/button/vars.less b/src/button/vars.less index d929a0f..01b42be 100644 --- a/src/button/vars.less +++ b/src/button/vars.less @@ -18,7 +18,6 @@ --ti-mobile-button-font-size-small: 12px; --ti-mobile-button-height-mini: 22px; --ti-mobile-button-font-size-mini: 10px; - --ti-mobile-button-radius: 2px; --ti-mobile-button-text-color: var(--ti-mobile-common-color-link-highlight, #4a79fe); --ti-mobile-button-text-color-hover: #6e94fe; --ti-mobile-button-text-color-active: var(--ti-mobile-common-color-link-highlight, #4a79fe); From 98be394b75488a41b72f7d84f4ac67071770a12e Mon Sep 17 00:00:00 2001 From: MNZhu Date: Mon, 27 Feb 2023 15:38:11 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(button):=20css=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=A7=84=E8=8C=83=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/base/basic-var.less | 11 ++--- src/button/index.js | 8 ++-- src/button/index.less | 98 ++++++++++++++++++++--------------------- src/button/vars.less | 16 +++---- 4 files changed, 67 insertions(+), 66 deletions(-) diff --git a/src/base/basic-var.less b/src/base/basic-var.less index 8194bc8..c3bb4ec 100644 --- a/src/base/basic-var.less +++ b/src/base/basic-var.less @@ -77,19 +77,20 @@ --ti-mobile-common-color-link-dark: var(--ti-mobile-base-color-common-2); /* 文本_链接__深色*/ --ti-mobile-common-color-link-highlight: var(--ti-mobile-base-color-brand-1); /* 文本_链接_高亮色*/ --ti-mobile-common-color-link-gray: var(--ti-mobile-base-color-common-13); /* 文本_链接_灰色加强*/ - --ti-mobile-common-color-link-white: var( --ti-mobile-base-color-common-12); /* 文本_链接_白色*/ + --ti-mobile-common-color-link-white: var(--ti-mobile-base-color-common-12); /* 文本_链接_白色*/ /* 线颜色*/ --ti-mobile-common-color-line-hightlight: var(--ti-mobile-base-color-brand-1); /* 高亮_描边色*/ - --ti-mobile-common-color-line-dark: var( --ti-mobile-base-color-common-9); /* 深_描边色*/ - --ti-mobile-common-color-line-light: var( --ti-mobile-base-color-common-10); /* 浅_描边色*/ + --ti-mobile-common-color-line-dark: var(--ti-mobile-base-color-common-9); /* 深_描边色*/ + --ti-mobile-common-color-line-light: var(--ti-mobile-base-color-common-10); /* 浅_描边色*/ /* 蒙层色*/ - --ti-mobile-common-color-mask-light: rgba(0,0,0,0.5); /* 蒙层_相对浅*/ - --ti-mobile-common-color-mask-dark: rgba(0,0,0,0.75); /* 蒙层_相对深*/ + --ti-mobile-common-color-mask-light: rgba(0, 0, 0, 0.5); /* 蒙层_相对浅*/ + --ti-mobile-common-color-mask-dark: rgba(0, 0, 0, 0.75); /* 蒙层_相对深*/ /* 蒙层色*/ --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/ --ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/ --ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/ + --ti-mobile-common-bg-color-disabled: #e8e8e8; /* 背景_禁用*/ } diff --git a/src/button/index.js b/src/button/index.js index 811e1e4..ae9f533 100644 --- a/src/button/index.js +++ b/src/button/index.js @@ -6,10 +6,10 @@ export default { "tiny-mobile-button-text-color-default": "#191919", "tiny-mobile-button-border-color": "#dbdbdb", "tiny-mobile-button-bg-color-default": "#fff", - "tiny-mobile-button-bg-color-primary": "#4a79fe", - "tiny-mobile-button-bg-color-success": "#52c41a", - "tiny-mobile-button-bg-color-warning": "#faad14", - "tiny-mobile-button-bg-color-danger": "#f04b3d", + "tiny-mobile-button-bg-color-primary": "#1e8aff", + "tiny-mobile-button-bg-color-success": "#1ebe40", + "tiny-mobile-button-bg-color-warning": "#fccd32", + "tiny-mobile-button-bg-color-danger": "#eb5454", "tiny-mobile-button-bg-color-disabled": "#e8e8e8", "tiny-mobile-button-bg-color-info": "#333", "tiny-mobile-button-height-medium": "36px", diff --git a/src/button/index.less b/src/button/index.less index 5e6b3c0..8abd513 100644 --- a/src/button/index.less +++ b/src/button/index.less @@ -21,9 +21,9 @@ position: relative; margin: 0; padding: 0; - height: var(--ti-mobile-button-height, 42px); - line-height: var(--ti-mobile-button-height, 42px); - font-size: var(--ti-mobile-button-font-size-default, 16px); + height: var(--ti-mobile-button-height); + line-height: var(--ti-mobile-button-height); + font-size: var(--ti-mobile-button-font-size-default); -webkit-text-size-adjust: 100%; border-width: 1px; border-style: solid; @@ -72,27 +72,27 @@ &.is-disabled:active, &.is-disabled.is-active { cursor: not-allowed; - .button-color(var(--ti-mobile-button-text-color-disabled, #dbdbdb), - var(--ti-mobile-button-bg-color-disabled, #e8e8e8), - var(--ti-mobile-button-bg-color-disabled, #e8e8e8)); + .button-color(var(--ti-mobile-button-text-color-disabled), + var(--ti-mobile-button-bg-color-disabled), + var(--ti-mobile-button-bg-color-disabled)); } .is-icon { - fill: var(--ti-mobile-button-text-color-white, #fff); - font-size: var(--ti-mobile-button-font-size-default, 16px); + fill: var(--ti-mobile-button-text-color-white); + font-size: var(--ti-mobile-button-font-size-default); } &--default { - .button-color(var(--ti-mobile-button-text-color-default, #191919), - var(--ti-mobile-button-border-color, #dbdbdb), - var(--ti-mobile-button-bg-color-default, #fff)); + .button-color(var(--ti-mobile-button-text-color-default), + var(--ti-mobile-button-border-color), + var(--ti-mobile-button-bg-color-default)); .is-icon { - fill: var(--ti-mobile-button-text-color-default, #666); + fill: var(--ti-mobile-button-text-color-default); } &.is-disabled .is-icon { - fill: var(--ti-mobile-button-text-color-white, #fff); + fill: var(--ti-mobile-button-text-color-white); } } @@ -103,75 +103,75 @@ } &--primary { - .button-type(var(--ti-mobile-button-text-color-white, #fff), - var(--ti-mobile-button-bg-color-primary, #4a79fe)); + .button-type(var(--ti-mobile-button-text-color-white), + var(--ti-mobile-button-bg-color-primary)); &.is-plain { - .button-plain(var(--ti-mobile-button-bg-color-primary, #4a79fe)); + .button-plain(var(--ti-mobile-button-bg-color-primary)); } } &--success { - .button-type(var(--ti-mobile-button-text-color-white, #fff), - var(--ti-mobile-button-bg-color-success, #52c41a)); + .button-type(var(--ti-mobile-button-text-color-white), + var(--ti-mobile-button-bg-color-success)); &.is-plain { - .button-plain(var(--ti-mobile-button-bg-color-success, #52c41a)); + .button-plain(var(--ti-mobile-button-bg-color-success)); } } &--warning { - .button-type(var(--ti-mobile-button-text-color-white, #fff), - var(--ti-mobile-button-bg-color-warning, #faad14)); + .button-type(var(--ti-mobile-button-text-color-white), + var(--ti-mobile-button-bg-color-warning)); &.is-plain { - .button-plain(var(--ti-mobile-button-bg-color-warning, #faad14)); + .button-plain(var(--ti-mobile-button-bg-color-warning)); } } &--danger { - .button-type(var(--ti-mobile-button-text-color-white, #fff), - var(--ti-mobile-button-bg-color-danger, #f04b3d)); + .button-type(var(--ti-mobile-button-text-color-white), + var(--ti-mobile-button-bg-color-danger)); &.is-plain { - .button-plain(var(--ti-mobile-button-bg-color-danger, #f04b3d)); + .button-plain(var(--ti-mobile-button-bg-color-danger)); } } &--info { - .button-type(var(--ti-mobile-button-text-color-white, #fff), - var(--ti-mobile-button-bg-color-info, #333)); + .button-type(var(--ti-mobile-button-text-color-white), + var(--ti-mobile-button-bg-color-info)); &.is-plain { - .button-plain(var(--ti-mobile-button-bg-color-info, #333)); + .button-plain(var(--ti-mobile-button-bg-color-info)); } } &--text { - .button-text(var(--ti-mobile-button-text-color, #4a79fe), - var(--ti-mobile-button-text-color-hover, #6e94fe), - var(--ti-mobile-button-text-color-active, #4a79fe), - var(--ti-mobile-button-text-color-disabled, #dbdbdb)); + .button-text(var(--ti-mobile-button-text-color), + var(--ti-mobile-button-text-color-hover), + var(--ti-mobile-button-text-color-active), + var(--ti-mobile-button-text-color-disabled)); } &--secondary { - .button-type(var(--ti-mobile-button-text-color-default, #191919), - var(--ti-mobile-button-bg-color-secondary, #f5f5f5)); + .button-type(var(--ti-mobile-button-text-color-default), + var(--ti-mobile-button-bg-color-secondary)); &.is-plain { - .button-plain(var(--ti-mobile-button-bg-color-secondary, #f5f5f5)); + .button-plain(var(--ti-mobile-button-bg-color-secondary)); } } &--default { - .button-color(var(--ti-mobile-button-text-color-default, #191919), - var(--ti-mobile-button-text-color-disabled, #dbdbdb), - var(--ti-mobile-button-text-color-white, #fff)); + .button-color(var(--ti-mobile-button-text-color-default), + var(--ti-mobile-button-text-color-disabled), + var(--ti-mobile-button-text-color-white)); &.is-disabled { - .button-color(var(--ti-mobile-button-text-color-disabled, #dbdbdb), - var(--ti-mobile-button-text-color-disabled, #dbdbdb), - var(--ti-mobile-button-bg-color-white, #fff)); + .button-color(var(--ti-mobile-button-text-color-disabled), + var(--ti-mobile-button-text-color-disabled), + var(--ti-mobile-button-bg-color-white)); } } @@ -183,24 +183,24 @@ padding: 0 16px; line-height: 36px; - .button-size(var(--ti-mobile-button-height-medium, 36px), - var(--ti-mobile-button-font-size-medium, 14px)); + .button-size(var(--ti-mobile-button-height-medium), + var(--ti-mobile-button-font-size-medium,)); } &--small { padding: 0 12px; line-height: 28px; - .button-size(var(--ti-mobile-button-height-small, 28px), - var(--ti-mobile-button-font-size-small, 12px)); + .button-size(var(--ti-mobile-button-height-small), + var(--ti-mobile-button-font-size-small)); } &--mini { padding: 0 8px; line-height: 22px; - .button-size(var(--ti-mobile-button-height-mini, 22px), - var(--ti-mobile-button-font-size-mini, 10px)); + .button-size(var(--ti-mobile-button-height-mini), + var(--ti-mobile-button-font-size-mini)); } &.is-loading { @@ -208,8 +208,8 @@ pointer-events: none; svg { - fill: var(--ti-mobile-button-text-color-white, #fff); - font-size: var(--ti-mobile-button-font-size-default, 16px); + fill: var(--ti-mobile-button-text-color-white); + font-size: var(--ti-mobile-button-font-size-default); } } diff --git a/src/button/vars.less b/src/button/vars.less index 01b42be..724060b 100644 --- a/src/button/vars.less +++ b/src/button/vars.less @@ -1,16 +1,16 @@ :root { --ti-mobile-button-height: 42px; --ti-mobile-button-font-size-default: 16px; - --ti-mobile-button-text-color-white: #fff; + --ti-mobile-button-text-color-white: var(--ti-mobile-common-color-text-white, #fff); --ti-mobile-button-text-color-disabled: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb); --ti-mobile-button-text-color-default: var(--ti-mobile-common-color-text-primary, #191919); - --ti-mobile-button-border-color: #dbdbdb; - --ti-mobile-button-bg-color-default: #fff; - --ti-mobile-button-bg-color-primary: var(--ti-mobile-common-color-link-highlight, #4a79fe); - --ti-mobile-button-bg-color-success: #52c41a; - --ti-mobile-button-bg-color-warning: #faad14; - --ti-mobile-button-bg-color-danger: #f04b3d; - --ti-mobile-button-bg-color-disabled: #e8e8e8; + --ti-mobile-button-border-color: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb); + --ti-mobile-button-bg-color-default: var(--ti-mobile-common-bg-color-white, #fff); + --ti-mobile-button-bg-color-primary: var(--ti-mobile-common-color-error-figure-3, #1e8aff); + --ti-mobile-button-bg-color-success: var(--ti-mobile-common-color-warning-figure-3, #1ebe40); + --ti-mobile-button-bg-color-warning: var(--ti-mobile-common-color-error-figure-2, #fccd32); + --ti-mobile-button-bg-color-danger: var(--ti-mobile-common-color-error-figure-1, #eb5454); + --ti-mobile-button-bg-color-disabled: var(--ti-mobile-common-bg-color-disabled, #e8e8e8); --ti-mobile-button-bg-color-info: #333; --ti-mobile-button-height-medium: 36px; --ti-mobile-button-font-size-medium: 14px;