[gatsby-theme-wordpress-basic] Split theme.js

[jeanfredrik]

The theme.js file is the core of a powerful way to customize the Gatsby theme plugin in a project. Right now, the exported object of that file in translated into CSS variables and default properties for components. There’s no distinction made between these which leads to there being CSS variables that aren’t used (because they are supposed to be props for components) or extra props that are forwarded as HTML attributes via ...restProps (because thet are supposed to be CSS vars).

I suggest splitting the object into two or more distinct parts, e.g.:

export const defaultProps = {
  Link: {
    components: ...
  },
  // ...
}

export const cssVars = {
  link: {
    default: { color: "#369" },
    hover: { color: "#47A" },
  },
}

This makes it easy to add more exports later for other purposes.