You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
1.2 KiB

  1. import styled from '@emotion/styled';
  2. import StyledSystem, {
  3. background,
  4. border,
  5. color,
  6. flexbox,
  7. grid,
  8. layout,
  9. position,
  10. shadow,
  11. space,
  12. typography,
  13. compose,
  14. } from 'styled-system';
  15. import { Box } from 'theme-ui';
  16. const systemProps = compose(
  17. layout,
  18. color,
  19. space,
  20. background,
  21. border,
  22. grid,
  23. position,
  24. shadow,
  25. typography,
  26. flexbox
  27. );
  28. export interface ILineHeight {
  29. lineHeight?: StyledSystem.LineHeightProps['lineHeight'];
  30. }
  31. export interface IFontWeight {
  32. fontWeight?: StyledSystem.FontWeightProps['fontWeight'];
  33. }
  34. export interface IFontSize {
  35. fontSize?:
  36. | StyledSystem.ResponsiveValue<StyledSystem.FontSizeProps['fontSize']>
  37. | StyledSystem.FontSizeProps['fontSize'];
  38. }
  39. type StyledSystemProps = StyledSystem.LayoutProps &
  40. StyledSystem.ColorProps &
  41. StyledSystem.SpaceProps &
  42. StyledSystem.BordersProps &
  43. StyledSystem.BackgroundProps &
  44. StyledSystem.PositionProps &
  45. StyledSystem.FlexboxProps &
  46. StyledSystem.ShadowProps &
  47. StyledSystem.GridProps &
  48. StyledSystem.OpacityProps &
  49. StyledSystem.OverflowProps &
  50. IFontSize &
  51. IFontWeight &
  52. ILineHeight;
  53. const Block = styled(Box)({}, systemProps);
  54. export const Flex = styled(Block)(
  55. {
  56. display: 'flex',
  57. },
  58. systemProps
  59. );
  60. export default Block;