ant-design/components/button/style/index.tsx
MadCcc 8e27cf986f
chore: rm component less file (#36244)
* chore: rm component less file

* refactor: less file

* refactor: rm less

* refactor: rm page-header and comment

* chore: rm less in components

* chore: update dist config

* chore: update image test

* chore: update dekko

* chore: rm lib dekko

* chore: update dist dekko

* chore: udpate bundle size

* test: update snapshot

* test: rm theme test

* test: update snapshot

* test: update snapshot

* chore: copy reset.css

* test: update image test

* chore: copy reset.css to es

* chore: update site script
2022-07-05 21:55:21 +08:00

403 lines
10 KiB
TypeScript

import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme';
import { genComponentStyleHook, mergeToken } from '../../theme';
import genGroupStyle from './group';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {}
export interface ButtonToken extends FullToken<'Button'> {
colorBgTextHover: string;
colorBgTextActive: string;
// FIXME: should be removed
colorOutlineDefault: string;
}
// ============================== Shared ==============================
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
const { componentCls, iconCls } = token;
return {
[componentCls]: {
outline: 'none',
position: 'relative',
display: 'inline-block',
fontWeight: 400,
whiteSpace: 'nowrap',
textAlign: 'center',
backgroundImage: 'none',
backgroundColor: 'transparent',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
cursor: 'pointer',
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
userSelect: 'none',
touchAction: 'manipulation',
lineHeight: token.lineHeight,
color: token.colorText,
'> span': {
display: 'inline-block',
},
// Leave a space between icon and text.
[`> ${iconCls} + span, > span + ${iconCls}`]: {
marginInlineStart: token.marginXS,
},
[`&${componentCls}-block`]: {
width: '100%',
},
},
};
};
const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
'&:not(:disabled)': {
'&:hover, &:focus': hoverStyle,
'&:active': activeStyle,
},
});
// ============================== Shape ===============================
const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
minWidth: token.controlHeight,
paddingInlineStart: 0,
paddingInlineEnd: 0,
borderRadius: '50%',
});
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderRadius: token.controlHeight,
paddingInlineStart: token.controlHeight / 2,
paddingInlineEnd: token.controlHeight / 2,
width: 'auto',
});
// =============================== Type ===============================
const genGhostButtonStyle = (
btnCls: string,
textColor: string | false,
borderColor: string | false,
textColorDisabled: string | false,
borderColorDisabled: string | false,
): CSSObject => ({
[`&${btnCls}-background-ghost`]: {
color: textColor || undefined,
backgroundColor: 'transparent',
borderColor: borderColor || undefined,
boxShadow: 'none',
'&:hover': {
backgroundColor: 'transparent',
},
'&:disabled': {
cursor: 'not-allowed',
color: textColorDisabled || undefined,
borderColor: borderColorDisabled || undefined,
},
},
});
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
'&:disabled': {
cursor: 'not-allowed',
borderColor: token.colorBorder,
color: token.colorTextDisabled,
backgroundColor: token.colorBgContainerDisabled,
boxShadow: 'none',
},
});
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderRadius: token.controlRadius,
...genSolidDisabledButtonStyle(token),
});
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
'&:disabled': {
cursor: 'not-allowed',
color: token.colorTextDisabled,
},
});
// Type: Default
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidButtonStyle(token),
backgroundColor: token.colorBgContainer,
borderColor: token.colorBorder,
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
...genHoverActiveButtonStyle(
{
color: token.colorPrimaryHover,
borderColor: token.colorPrimaryHover,
},
{
color: token.colorPrimaryActive,
borderColor: token.colorPrimaryActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.colorBgContainer,
token.colorBgContainer,
token.colorTextDisabled,
token.colorBorder,
),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
borderColor: token.colorError,
...genHoverActiveButtonStyle(
{
color: token.colorErrorHover,
borderColor: token.colorErrorHover,
},
{
color: token.colorErrorActive,
borderColor: token.colorErrorActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.colorError,
token.colorError,
token.colorTextDisabled,
token.colorBorder,
),
...genSolidDisabledButtonStyle(token),
},
});
// Type: Primary
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidButtonStyle(token),
color: token.colorTextLightSolid,
backgroundColor: token.colorPrimary,
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorPrimaryOutline}`,
...genHoverActiveButtonStyle(
{
backgroundColor: token.colorPrimaryHover,
},
{
backgroundColor: token.colorPrimaryActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.colorPrimary,
token.colorPrimary,
token.colorTextDisabled,
token.colorBorder,
),
[`&${token.componentCls}-dangerous`]: {
backgroundColor: token.colorError,
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
...genHoverActiveButtonStyle(
{
backgroundColor: token.colorErrorHover,
},
{
backgroundColor: token.colorErrorActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.colorError,
token.colorError,
token.colorTextDisabled,
token.colorBorder,
),
...genSolidDisabledButtonStyle(token),
},
});
// Type: Dashed
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genDefaultButtonStyle(token),
borderStyle: 'dashed',
});
// Type: Link
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
color: token.colorLink,
...genHoverActiveButtonStyle(
{
color: token.colorLinkHover,
},
{
color: token.colorLinkActive,
},
),
...genPureDisabledButtonStyle(token),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
...genHoverActiveButtonStyle(
{
color: token.colorErrorHover,
},
{
color: token.colorErrorActive,
},
),
...genPureDisabledButtonStyle(token),
},
});
// Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderRadius: token.controlRadius,
...genHoverActiveButtonStyle(
{
backgroundColor: token.colorBgTextHover,
},
{
backgroundColor: token.colorBgTextActive,
},
),
...genPureDisabledButtonStyle(token),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
...genPureDisabledButtonStyle(token),
},
});
const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
const { componentCls } = token;
return {
[`${componentCls}-default`]: genDefaultButtonStyle(token),
[`${componentCls}-primary`]: genPrimaryButtonStyle(token),
[`${componentCls}-dashed`]: genDashedButtonStyle(token),
[`${componentCls}-link`]: genLinkButtonStyle(token),
[`${componentCls}-text`]: genTextButtonStyle(token),
};
};
// =============================== Size ===============================
const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSSInterpolation => {
const { componentCls, iconCls } = token;
const paddingVertical = Math.max(
0,
(token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.controlLineWidth,
);
const paddingHorizontal = token.padding - token.controlLineWidth;
const iconOnlyCls = `${componentCls}-icon-only`;
return [
// Size
{
[`${componentCls}${sizePrefixCls}`]: {
fontSize: token.fontSize,
height: token.controlHeight,
padding: `${paddingVertical}px ${paddingHorizontal}px`,
[`&${iconOnlyCls}`]: {
width: token.controlHeight,
paddingInlineStart: 0,
paddingInlineEnd: 0,
'> span': {
transform: 'scale(1.143)', // 14px -> 16px
},
},
// Loading
[`&${componentCls}-loading`]: {
opacity: token.opacityLoading,
cursor: 'default',
},
[`${componentCls}-loading-icon`]: {
transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
},
[`&:not(${iconOnlyCls}) ${componentCls}-loading-icon > ${iconCls}`]: {
marginInlineEnd: token.marginXS,
},
},
},
// Shape - patch prefixCls again to override solid border radius style
{
[`${componentCls}${componentCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token),
},
{
[`${componentCls}${componentCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token),
},
];
};
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token);
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightSM,
padding: token.paddingXS,
});
return genSizeButtonStyle(largeToken, `${token.componentCls}-sm`);
};
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG,
});
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`);
};
// ============================== Export ==============================
export default genComponentStyleHook('Button', token => {
const { buttonColorBgTextHover, buttonColorBgTextActive, controlTmpOutline } = token;
const buttonToken = mergeToken<ButtonToken>(token, {
colorBgTextHover: buttonColorBgTextHover,
colorBgTextActive: buttonColorBgTextActive,
colorOutlineDefault: controlTmpOutline,
});
return [
// Shared
genSharedButtonStyle(buttonToken),
// Size
genSizeSmallButtonStyle(buttonToken),
genSizeBaseButtonStyle(buttonToken),
genSizeLargeButtonStyle(buttonToken),
// Group (type, ghost, danger, disabled, loading)
genTypeButtonStyle(buttonToken),
// Button Group
genGroupStyle(buttonToken),
];
});