index.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { genComponentStyleHook } from '../../theme/internal';
  3. import { getCopiableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getTitleStyles } from './mixins';
  4. import { operationUnit } from '../../style';
  5. const genTypographyStyle = token => {
  6. const {
  7. componentCls,
  8. sizeMarginHeadingVerticalStart
  9. } = token;
  10. return {
  11. [componentCls]: _extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends({
  12. color: token.colorText,
  13. wordBreak: 'break-word',
  14. lineHeight: token.lineHeight,
  15. [`&${componentCls}-secondary`]: {
  16. color: token.colorTextDescription
  17. },
  18. [`&${componentCls}-success`]: {
  19. color: token.colorSuccess
  20. },
  21. [`&${componentCls}-warning`]: {
  22. color: token.colorWarning
  23. },
  24. [`&${componentCls}-danger`]: {
  25. color: token.colorError,
  26. 'a&:active, a&:focus': {
  27. color: token.colorErrorActive
  28. },
  29. 'a&:hover': {
  30. color: token.colorErrorHover
  31. }
  32. },
  33. [`&${componentCls}-disabled`]: {
  34. color: token.colorTextDisabled,
  35. cursor: 'not-allowed',
  36. userSelect: 'none'
  37. },
  38. [`
  39. div&,
  40. p
  41. `]: {
  42. marginBottom: '1em'
  43. }
  44. }, getTitleStyles(token)), {
  45. [`
  46. & + h1${componentCls},
  47. & + h2${componentCls},
  48. & + h3${componentCls},
  49. & + h4${componentCls},
  50. & + h5${componentCls}
  51. `]: {
  52. marginTop: sizeMarginHeadingVerticalStart
  53. },
  54. [`
  55. div,
  56. ul,
  57. li,
  58. p,
  59. h1,
  60. h2,
  61. h3,
  62. h4,
  63. h5`]: {
  64. [`
  65. + h1,
  66. + h2,
  67. + h3,
  68. + h4,
  69. + h5
  70. `]: {
  71. marginTop: sizeMarginHeadingVerticalStart
  72. }
  73. }
  74. }), getResetStyles()), getLinkStyles(token)), {
  75. // Operation
  76. [`
  77. ${componentCls}-expand,
  78. ${componentCls}-edit,
  79. ${componentCls}-copy
  80. `]: _extends(_extends({}, operationUnit(token)), {
  81. marginInlineStart: token.marginXXS
  82. })
  83. }), getEditableStyles(token)), getCopiableStyles(token)), getEllipsisStyles()), {
  84. '&-rtl': {
  85. direction: 'rtl'
  86. }
  87. })
  88. };
  89. };
  90. // ============================== Export ==============================
  91. export default genComponentStyleHook('Typography', token => [genTypographyStyle(token)], {
  92. sizeMarginHeadingVerticalStart: '1.2em',
  93. sizeMarginHeadingVerticalEnd: '0.5em'
  94. });