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

import styled from '@emotion/styled';
import StyledSystem, {
background,
border,
color,
flexbox,
grid,
layout,
position,
shadow,
space,
typography,
compose,
} from 'styled-system';
import { Box } from 'theme-ui';
const systemProps = compose(
layout,
color,
space,
background,
border,
grid,
position,
shadow,
typography,
flexbox
);
export interface ILineHeight {
lineHeight?: StyledSystem.LineHeightProps['lineHeight'];
}
export interface IFontWeight {
fontWeight?: StyledSystem.FontWeightProps['fontWeight'];
}
export interface IFontSize {
fontSize?:
| StyledSystem.ResponsiveValue<StyledSystem.FontSizeProps['fontSize']>
| StyledSystem.FontSizeProps['fontSize'];
}
type StyledSystemProps = StyledSystem.LayoutProps &
StyledSystem.ColorProps &
StyledSystem.SpaceProps &
StyledSystem.BordersProps &
StyledSystem.BackgroundProps &
StyledSystem.PositionProps &
StyledSystem.FlexboxProps &
StyledSystem.ShadowProps &
StyledSystem.GridProps &
StyledSystem.OpacityProps &
StyledSystem.OverflowProps &
IFontSize &
IFontWeight &
ILineHeight;
const Block = styled(Box)({}, systemProps);
export const Flex = styled(Block)(
{
display: 'flex',
},
systemProps
);
export default Block;