brand-themes

Brand themes for styled components using styled system.

Concept

This project is a proof of concept for building a set of themeable reusable React Components allowing for support of different brand designs.

View the Storybook.

Components

The component provides sensible defaults that can be overridden based on theme objects that follow the Styled System Theme Specification.

Button Component

const Button = styled.button<ButtonStyleProps>(
  variant({
    scale: 'buttons',
  })
)

Themes

The theme objects follow the Styled System Theme Specification.

Brand Theme

const buttons = {
  primary: {
    backgroundColor: color.primary,
    height: '42px',
    width: '302px',
    borderRadius: '8px',
    border: `3px solid ${color.primary}`,
    color: color.white,
    fontFamily: 'Lato',
    fontSize: '16px',
    fontWeight: 700,
    cursor: 'pointer',
    '&:hover': {
      transform: 'translateY(-2px)',
    },
    '&:active': {
      transform: 'translateY(1px)',
    },
    transition: 'transform 200ms,background 200ms',
  },
}