93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
|
import { operationUnit } from '../../style';
|
||
|
|
import { genComponentStyleHook } from '../../theme/internal';
|
||
|
|
import { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getTitleStyles } from './mixins';
|
||
|
|
const genTypographyStyle = token => {
|
||
|
|
const {
|
||
|
|
componentCls,
|
||
|
|
titleMarginTop
|
||
|
|
} = token;
|
||
|
|
return {
|
||
|
|
[componentCls]: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
|
||
|
|
color: token.colorText,
|
||
|
|
wordBreak: 'break-word',
|
||
|
|
lineHeight: token.lineHeight,
|
||
|
|
[`&${componentCls}-secondary`]: {
|
||
|
|
color: token.colorTextDescription
|
||
|
|
},
|
||
|
|
[`&${componentCls}-success`]: {
|
||
|
|
color: token.colorSuccess
|
||
|
|
},
|
||
|
|
[`&${componentCls}-warning`]: {
|
||
|
|
color: token.colorWarning
|
||
|
|
},
|
||
|
|
[`&${componentCls}-danger`]: {
|
||
|
|
color: token.colorError,
|
||
|
|
'a&:active, a&:focus': {
|
||
|
|
color: token.colorErrorActive
|
||
|
|
},
|
||
|
|
'a&:hover': {
|
||
|
|
color: token.colorErrorHover
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[`&${componentCls}-disabled`]: {
|
||
|
|
color: token.colorTextDisabled,
|
||
|
|
cursor: 'not-allowed',
|
||
|
|
userSelect: 'none'
|
||
|
|
},
|
||
|
|
[`
|
||
|
|
div&,
|
||
|
|
p
|
||
|
|
`]: {
|
||
|
|
marginBottom: '1em'
|
||
|
|
}
|
||
|
|
}, getTitleStyles(token)), {
|
||
|
|
[`
|
||
|
|
& + h1${componentCls},
|
||
|
|
& + h2${componentCls},
|
||
|
|
& + h3${componentCls},
|
||
|
|
& + h4${componentCls},
|
||
|
|
& + h5${componentCls}
|
||
|
|
`]: {
|
||
|
|
marginTop: titleMarginTop
|
||
|
|
},
|
||
|
|
[`
|
||
|
|
div,
|
||
|
|
ul,
|
||
|
|
li,
|
||
|
|
p,
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3,
|
||
|
|
h4,
|
||
|
|
h5`]: {
|
||
|
|
[`
|
||
|
|
+ h1,
|
||
|
|
+ h2,
|
||
|
|
+ h3,
|
||
|
|
+ h4,
|
||
|
|
+ h5
|
||
|
|
`]: {
|
||
|
|
marginTop: titleMarginTop
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}), getResetStyles(token)), getLinkStyles(token)), {
|
||
|
|
// Operation
|
||
|
|
[`
|
||
|
|
${componentCls}-expand,
|
||
|
|
${componentCls}-edit,
|
||
|
|
${componentCls}-copy
|
||
|
|
`]: Object.assign(Object.assign({}, operationUnit(token)), {
|
||
|
|
marginInlineStart: token.marginXXS
|
||
|
|
})
|
||
|
|
}), getEditableStyles(token)), getCopyableStyles(token)), getEllipsisStyles()), {
|
||
|
|
'&-rtl': {
|
||
|
|
direction: 'rtl'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
};
|
||
|
|
};
|
||
|
|
// ============================== Export ==============================
|
||
|
|
export default genComponentStyleHook('Typography', token => [genTypographyStyle(token)], () => ({
|
||
|
|
titleMarginTop: '1.2em',
|
||
|
|
titleMarginBottom: '0.5em'
|
||
|
|
}));
|