diff --git a/packages/theme/src/button/aurora-theme.js b/packages/theme/src/button/aurora-theme.js index 21753dd23c..231d314940 100644 --- a/packages/theme/src/button/aurora-theme.js +++ b/packages/theme/src/button/aurora-theme.js @@ -1,3 +1,7 @@ export const tinyButtonAuroraTheme = { - 'ti-button-normal-text-color': '#1890ff' + 'ti-button-normal-text-color': '#1890ff', + 'ti-button-text-has-svg-hover-text-color': '#40a9ff', + 'ti-button-only-icon-min-width': '80px', + 'ti-button-only-icon-padding-horizontal': '8px', + 'ti-button-only-icon-border-radius': '2px' } diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less index 179c5ffd2c..ba7bdb8959 100644 --- a/packages/theme/src/button/index.less +++ b/packages/theme/src/button/index.less @@ -58,6 +58,22 @@ vertical-align: middle; } + &.is-only-icon { + min-width: var(--ti-button-only-icon-min-width); + padding: 0 var(--ti-button-only-icon-padding-horizontal); + border-radius: var(--ti-button-only-icon-border-radius); + border-color: var(--ti-button-only-icon-border-color); + &:hover { + border-color: var(--ti-button-only-icon-hover-border-color); + } + &.is-disabled { + border-color: var(--ti-button-only-icon-disabled-border-color); + &:hover { + border-color: var(--ti-button-only-icon-disabled-border-color); + } + } + } + &::-moz-focus-inner { border: 0; } @@ -155,7 +171,7 @@ &:not(.is-circle) { .@{svg-prefix-cls}.is-text { - margin-right: 8px; + margin-right: var(--ti-button-text-has-svg-icon-margin-right); } &.is-loading { @@ -343,12 +359,13 @@ &:has(.@{svg-prefix-cls}) { padding: 0 var(--ti-button-text-svg-padding-horizontal); + color: var(--ti-button-text-has-svg-text-color); } &:has(.@{svg-prefix-cls}):hover { background: var(--ti-button-text-hover-bg-color); border-radius: var(--ti-button-text-hover-border-radius); - + color: var(--ti-button-text-has-svg-hover-text-color); & .@{svg-prefix-cls} { fill: var(--ti-button-text-svg-hover-fill-color); } @@ -357,6 +374,7 @@ &:has(.@{svg-prefix-cls}).is-disabled { background: transparent; fill: var(--ti-button-text-svg-disabled-fill-color); + color: var(--ti-button-text-color-disabled); & .@{svg-prefix-cls} { fill: var(--ti-button-text-svg-disabled-fill-color); @@ -368,6 +386,12 @@ } } + &.is-only-icon { + &:hover { + background: var(--ti-button-text-only-icon-hover-bg-color); + } + } + & .@{svg-prefix-cls} { vertical-align: middle; fill: var(--ti-button-text-svg-fill-color); diff --git a/packages/theme/src/button/smb-theme.js b/packages/theme/src/button/smb-theme.js index 8df9434e10..9a6370e691 100644 --- a/packages/theme/src/button/smb-theme.js +++ b/packages/theme/src/button/smb-theme.js @@ -30,10 +30,14 @@ export const tinyButtonSmbTheme = { 'ti-button-size-mini-min-width': '24px', 'ti-button-text-svg-width': '16px', 'ti-button-text-svg-height': '16px', - 'ti-button-text-hover-bg-color': '#0000000D', + 'ti-button-text-hover-bg-color': 'transparent', + 'ti-button-text-only-icon-hover-bg-color': '#0000000D', 'ti-button-text-hover-border-radius': '4px', 'ti-button-text-svg-fill-color': '#191919', - 'ti-button-text-svg-hover-fill-color': '#595959', + 'ti-button-text-svg-hover-fill-color': '#191919', + 'ti-button-text-has-svg-text-color': '#191919', + 'ti-button-text-has-svg-hover-text-color': '#191919', + 'ti-button-text-has-svg-icon-margin-right': '4px', 'ti-button-text-svg-disabled-fill-color': '#C2C2C2', 'ti-button-text-svg-padding-horizontal': '0px', 'ti-button-size-small-font-size': '12px', @@ -50,10 +54,10 @@ export const tinyButtonSmbTheme = { 'ti-button-text-size-medium-height': '40px', 'ti-button-text-size-medium-svg-width': '32px', 'ti-button-text-size-medium-svg-height': '32px', - 'ti-button-text-size-default-min-width': '32px', - 'ti-button-text-size-default-height': '32px', - 'ti-button-text-size-default-svg-width': '24px', - 'ti-button-text-size-default-svg-height': '24px', + 'ti-button-text-size-default-min-width': '24px', + 'ti-button-text-size-default-height': '24px', + 'ti-button-text-size-default-svg-width': '16px', + 'ti-button-text-size-default-svg-height': '16px', 'ti-button-text-size-small-min-width': '24px', 'ti-button-text-size-small-height': '24px', 'ti-button-text-size-small-svg-width': '16px', @@ -62,5 +66,11 @@ export const tinyButtonSmbTheme = { 'ti-button-text-size-mini-height': '24px', 'ti-button-text-size-mini-svg-width': '16px', 'ti-button-text-size-mini-svg-height': '16px', - 'ti-button-text-hover-text-decoration': 'underline' + 'ti-button-text-hover-text-decoration': 'underline', + 'ti-button-only-icon-min-width': 'unset', + 'ti-button-only-icon-padding-horizontal': '8px', + 'ti-button-only-icon-border-radius': '6px', + 'ti-button-only-icon-border-color': '#c2c2c2', + 'ti-button-only-icon-hover-border-color': '#191919', + 'ti-button-only-icon-disabled-border-color': '#dbdbdb' } diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less index 4ee9a8fbcf..2d0331ed52 100644 --- a/packages/theme/src/button/vars.less +++ b/packages/theme/src/button/vars.less @@ -115,7 +115,7 @@ // 文字按钮悬浮文本修饰(hide) --ti-button-text-hover-text-decoration: none; // 文字按钮悬浮文本色 - --ti-button-text-color-hover: var(--ti-base-color-brand-5); + --ti-button-text-color-hover: var(--ti-common-color-text-link-hover); // 文字按钮悬浮文本字重 --ti-button-text-hover-weight: var(--ti-common-font-weight-4); // 文字按钮点击瞬间文本色 @@ -130,14 +130,22 @@ --ti-button-text-size-mini-svg-width: 1em; // 文字按钮悬浮背景色 --ti-button-text-hover-bg-color: transparent; + // 文字按钮只有图标悬浮背景色 + --ti-button-text-only-icon-hover-bg-color: transparent; // 文字按钮悬浮圆角 --ti-button-text-hover-border-radius: 0px; // 文字按钮图标填充色 - --ti-button-text-svg-fill-color: var(--ti-button-text-color); + --ti-button-text-svg-fill-color: var(--ti-common-color-text-secondary); // 文字按钮图标悬浮填充色 --ti-button-text-svg-hover-fill-color: var(--ti-button-text-color-hover); // 文字按钮禁用时图标填充色 --ti-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled); + // 图标加文字按钮图标右侧外边距 + --ti-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x); + // 图标加文字按钮字体颜色 + --ti-button-text-has-svg-text-color: var(--ti-common-color-text-primary); + // 图标加文字按钮悬浮时字体颜色 + --ti-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link); // 文字按钮只有svg时水平内边距 --ti-button-text-svg-padding-horizontal: var(--ti-common-size-2x); @@ -358,4 +366,17 @@ --ti-button-text-size-small-svg-width: 1em; // 纯文本按钮迷你尺寸图标高度 --ti-button-text-size-small-svg-height: 1em; + + // 纯图标按钮最小宽度 + --ti-button-only-icon-min-width: unset; + // 纯图标按钮水平内边距 + --ti-button-only-icon-padding-horizontal: 7px; + // 纯图标按钮边框圆角 + --ti-button-only-icon-border-radius: 2px; + // 纯图标按钮边框颜色 + --ti-button-only-icon-border-color: var(--ti-common-color-border); + // 纯图标按钮悬浮时边框颜色 + --ti-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal); + // 纯图标按钮禁用时边框颜色 + --ti-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled); } diff --git a/packages/theme/src/checkbox-button/index.less b/packages/theme/src/checkbox-button/index.less index 7543390de2..552bc98278 100644 --- a/packages/theme/src/checkbox-button/index.less +++ b/packages/theme/src/checkbox-button/index.less @@ -44,7 +44,7 @@ right: 4px; top: 0; border-bottom: 20px solid transparent; - border-right: 20px solid var(--ti-checkbox-button-checked-bg-color); + border-right: 20px solid var(--ti-checkbox-button-checked-border-color); border-top-right-radius: 6px; display: var(--ti-checkbox-button-checked-display); } diff --git a/packages/theme/src/checkbox-button/smb-theme.js b/packages/theme/src/checkbox-button/smb-theme.js index 029b191f71..cdc3269423 100644 --- a/packages/theme/src/checkbox-button/smb-theme.js +++ b/packages/theme/src/checkbox-button/smb-theme.js @@ -27,4 +27,5 @@ export const tinyCheckboxButtonSmbTheme = { 'ti-checkbox-button-mini-last-left-border-radius': '4px', 'ti-checkbox-button-mini-last-right-border-radius': '4px', 'ti-checkbox-button-checked-border-color': '#1476FF', + 'ti-checkbox-shadow-color': 'transparent' }