Theme-ui: How would this be done in theme-ui?

[sulaiman1073]

I'm using styled-system, and have this button component:

const Button = styled.button`
  ${baseStyles}
  ${variant({
    prop: "color",
    scale: "buttons.colors",
    variants: { a: {} }
  })}
  ${variant({
    prop: "background",
    scale: "buttons.backgrounds",
    variants: { a: {} }
  })}
  ${variant({
    prop: "size",
    scale: "buttons.sizes",
    variants: { a: {} }
  })}
  ${variant({
    prop: "shape",
    scale: "buttons.shapes",
    variants: { a: {} }
  })}
  ${color}
  ${color}
  ${space}
  ${border}
`;

export default Button;

Button.defaultProps = {
  background: "primary",
  color: "primary",
  size: "md",
  shape: "rounded"
};

Which I'd use like this:

    <Button size="lg" color="danger" shape="pill">
      Hello123
    </Button>

How would I replicate this in theme-ui?

Also, I have to do

variants: { a: {} }

to get it to fetch values from the theme object. Is this problem solved in this library?

[joehua87]

Hi @sulaiman1073 ,
I've just made the example that including size, color & variant here. Hope that helps!

Demo:

https://buzzcms.github.io/buzzcms-styleguide/

Code:

https://github.com/buzzcms/buzzcms-styleguide/blob/master/src/Button.tsx#L17-L52

[sulaiman1073]

Thanks for the answer, @joehua87

I expected something more concise from theme-ui, so I think I'll stick with styled-system for now.