Building design system with styled-components and styled-system II

const ButtonPill = styled(Button)`
border-radius: 24px;
background: transparent;
border: 1px solid;
color: ${props => props.bg};
border-color: ${props => props.bg};
`;
ButtonPill.defaultProps = {
bg: "orange"
};
const ButtonPill = props => <Button {...props} borderRadius="24px" bg="transparent" color={props.bg} />

STYLED SYSTEM:

import { color, fontSize, space } from "styled-system";const Button = styled.button`
${color};
${fontSize};
${space};
border: none;
border-radius: 3px;
font-weight: 500;
`;
Button.defaultProps = {
bg: "orange",
fontSize: 15,
py: 10,
px: 30,
m: 20
};

FURTHER OPTIMIZATION

import styled from "styled-components";
import {
space,
flex,
flexBasis,
flexDirection,
flexWrap,
justifyContent,
alignItems,
alignSelf,
alignContent
} from "styled-system";
const Column = styled.div`
display: flex;
${space};
${flex};
${flexBasis};
${flexDirection};
${flexWrap};
${justifyContent};
${alignItems};
${alignSelf};
${alignContent};
`;
const Image = styled.image`
display: flex;
${space};
${flex};
${flexBasis};
${flexDirection};
${flexWrap};
${justifyContent};
${alignItems};
${alignSelf};
${alignContent};
${width};
${height};
`;
import { css } from "styled-components";const flexProperties = css`
display: flex;
${space};
${flex};
${flexBasis};
${flexDirection};
${flexWrap};
${justifyContent};
${alignItems};
${alignSelf};
${alignContent};
`;
const Column = styled.div`
${flexProperties};
`;
const Image = styled.div`
${flexProperties};
${size};
`;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shiva Pandey

Shiva Pandey

48 Followers

Full Stack Developer at Facebook and Tech Enthusiast. Read my personal blog at: https://shivapandey.com/ Follow me on twitter: https://twitter.com/shivapandey04