Add Support for ThemeProvider in other components

[hzy]

Problem

The ThemeProvider component is basic implemented, now we need add support in other components to make it works.

Suggestion

Just do as it referenced in react offical document, receive context from higher level components.
User may not want to use ThemeProvider, we need to default it.
Below is a example:

const GrandSonComponent = (props, context) => {
  const { startColor = 'red', endColor = 'green' } = context
  return (
    <div
      style={{
        width: '100px',
        height: '100px',
        backgroundImage: `linear-gradient(90deg, ${startColor} 0%, ${endColor} 100%)`,
      }}
    >
      Foo
    </div>
  )
}
GrandSonComponent.contextTypes = {
  endColor: PropTypes.string,
  startColor: PropTypes.string,
}

Implement

If this issue is approved, I suggest the owner of each component do this job for their components.

[MMMartt]

I think we should set a default theme at somewhere like defaultTheme.js and import it when needed. Should I write one? @farawaaay

[hzy]

@MartinNey Good idea. I also have a idea that we define interface Theme and its factory with colors, fonts, and other theme factor as parameters.

So we now really provide themes rather than colors.

<ThemeProvider theme={themeFactory(... colors, ...others)}>
  ...
</ThemeProvider>

Or default,

<ThemeProvider theme={defaultTheme}>
  ...
</ThemeProvider>

As you can see, we can import defaultTheme from defaultTheme.js