Skip to content
Permalink
Browse files

feat(theme): add the console theme and update default theme

BREAKING CHANGE: Theme provider default theme is now DEFAULT, not CONSOLE. If you are not providing a theme prop but want the console theme you must now explicitly set the theme to console
  • Loading branch information
SiTaggart committed Dec 19, 2019
1 parent 3ee6b5d commit 3951f823454be266dd2b6d4cb805c437df33d86b
@@ -11,9 +11,7 @@ You should place the `Theme.Provider` around the root of your React application.
```js
import {Theme} from '@twilio-paste/theme';
<Theme.Provider>
...
</Theme.Provider>
<Theme.Provider theme="console">...</Theme.Provider>;
```

## Using tokens in custom components
@@ -33,7 +31,7 @@ import {themeGet} from '@styled-system/theme-get';
const custom = styled.div`
background-color: ${themeGet('backgrounds.primary')};
padding: ${props => props.theme.spacing.spacing20};
`
`;
```

### Paste ThemeConsumer
@@ -47,7 +45,7 @@ import {Theme} from '@twilio-paste/theme';
{({theme}) => {
return <p>What is the default text color {theme.textColors.colorText}</p>;
}}
</Theme.Consumer>
</Theme.Consumer>;
```

### Paste useTheme Hook
@@ -56,7 +54,7 @@ Paste Theme provides a React Hook called `useTheme` which returns the theme obje

```js
import React from 'react';
import { useTheme } from '@twilio-paste/theme';
import {useTheme} from '@twilio-paste/theme';
const HookExampleComponent = (): React.ReactElement => {
const theme = useTheme();
@@ -70,10 +68,8 @@ Paste also provides a HOC Component, which is a wrapper around the Emotion [HOC

```js
import React from 'react';
import { withTheme } from '@twilio-paste/theme';
import {withTheme} from '@twilio-paste/theme';
const ExampleComponent = ({theme}) => (
<p>What is the default text color {theme.textColors.colorText}</p>
);
const ExampleComponent = ({theme}) => <p>What is the default text color {theme.textColors.colorText}</p>;
const ExampleComponentwithTheme = withTheme(ExampleComponent);
```
@@ -10,7 +10,7 @@ const ThemeConsumerExampleComponent = (): React.ReactElement => {
describe('Theme.Consumer', () => {
it('should render without crashing', (): void => {
ReactDOM.render(
<Theme.Provider>
<Theme.Provider theme="console">
<ThemeConsumerExampleComponent />
</Theme.Provider>,
document.createElement('div')
@@ -19,7 +19,7 @@ describe('Theme.Consumer', () => {

it('should be able to access the theme object', () => {
const wrapper = mount(
<Theme.Provider>
<Theme.Provider theme="console">
<ThemeConsumerExampleComponent />
</Theme.Provider>
);
@@ -18,7 +18,7 @@ describe('Theme.Provider', () => {

it('should render the console link text color', (): void => {
const wrapper = mount(
<Theme.Provider>
<Theme.Provider theme="console">
<ThemeConsumerExampleTextColor />
</Theme.Provider>
);
@@ -36,7 +36,7 @@ describe('Theme.Provider', () => {

it('should rely on the default breakpoints set on the theme object', () => {
const wrapper = mount(
<Theme.Provider>
<Theme.Provider theme="console">
<ThemeConsumerExampleComponent />
</Theme.Provider>
);
@@ -11,7 +11,7 @@ const HookExampleComponent = (): React.ReactElement => {
describe('useTheme', () => {
it('should render without crashing', (): void => {
ReactDOM.render(
<Theme.Provider>
<Theme.Provider theme="console">
<HookExampleComponent />
</Theme.Provider>,
document.createElement('div')
@@ -20,7 +20,7 @@ describe('useTheme', () => {

it('should be able to access the theme object', () => {
const wrapper = mount(
<Theme.Provider>
<Theme.Provider theme="console">
<HookExampleComponent />
</Theme.Provider>
);
@@ -10,7 +10,7 @@ const MockComponentWithTheme = withTheme(MockComponent);
describe('withTheme', () => {
it('should render without crashing', (): void => {
ReactDOM.render(
<Theme.Provider>
<Theme.Provider theme="console">
<MockComponentWithTheme />
</Theme.Provider>,
document.createElement('div')
@@ -19,7 +19,7 @@ describe('withTheme', () => {

it('should be able to access the theme object', () => {
const wrapper = mount(
<Theme.Provider>
<Theme.Provider theme="console">
<MockComponentWithTheme />
</Theme.Provider>
);
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import {Global, css, SerializedStyles} from '@emotion/core';
import {themeGet} from '@styled-system/theme-get';
import {ThemeProvider as StyledThemeProvider} from 'emotion-theming';
import {DefaultTheme, SendGridTheme} from '@twilio-paste/theme-tokens';
import {DefaultTheme, SendGridTheme, ConsoleTheme} from '@twilio-paste/theme-tokens';
import {ThemeVariants} from './constants';

interface GlobalStyleProps {
@@ -40,8 +40,7 @@ export interface ThemeProviderProps {

const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
customBreakpoints,
// theme = 'console' | 'sendgrid' | 'flex' & 'default' eventually
theme = ThemeVariants.CONSOLE,
theme = ThemeVariants.DEFAULT,
...props
}) => {
let breakpoints = {};
@@ -52,8 +51,11 @@ const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
themeObject = SendGridTheme;
breakpoints = customBreakpoints || SendGridTheme.breakpoints;
break;
case ThemeVariants.FLEX:
case ThemeVariants.CONSOLE:
themeObject = ConsoleTheme;
breakpoints = customBreakpoints || ConsoleTheme.breakpoints;
break;
case ThemeVariants.FLEX:
case ThemeVariants.DEFAULT:
default:
themeObject = DefaultTheme;
@@ -28,7 +28,7 @@ storiesOf('Overview|Theme', module)
},
})
.add('Provider', () => (
<Theme.Provider>
<Theme.Provider theme="console">
<p>Using the Theme Provider to wrap your app</p>
</Theme.Provider>
))

0 comments on commit 3951f82

Please sign in to comment.
You can’t perform that action at this time.