diff --git a/packages/paste-theme/README.md b/packages/paste-theme/README.md
index ce6a232fd5..fb78515a8a 100644
--- a/packages/paste-theme/README.md
+++ b/packages/paste-theme/README.md
@@ -11,9 +11,7 @@ You should place the `Theme.Provider` around the root of your React application.
```js
import {Theme} from '@twilio-paste/theme';
-
- ...
-
+...;
```
## 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
What is the default text color {theme.textColors.colorText}
;
}}
-
+;
```
### 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}) => (
- What is the default text color {theme.textColors.colorText}
-);
+const ExampleComponent = ({theme}) => What is the default text color {theme.textColors.colorText}
;
const ExampleComponentwithTheme = withTheme(ExampleComponent);
```
diff --git a/packages/paste-theme/__tests__/themeConsumer.spec.tsx b/packages/paste-theme/__tests__/themeConsumer.spec.tsx
index 9fb5828efd..21f5fdd5f6 100644
--- a/packages/paste-theme/__tests__/themeConsumer.spec.tsx
+++ b/packages/paste-theme/__tests__/themeConsumer.spec.tsx
@@ -10,7 +10,7 @@ const ThemeConsumerExampleComponent = (): React.ReactElement => {
describe('Theme.Consumer', () => {
it('should render without crashing', (): void => {
ReactDOM.render(
-
+
,
document.createElement('div')
@@ -19,7 +19,7 @@ describe('Theme.Consumer', () => {
it('should be able to access the theme object', () => {
const wrapper = mount(
-
+
);
diff --git a/packages/paste-theme/__tests__/themeProvider.spec.tsx b/packages/paste-theme/__tests__/themeProvider.spec.tsx
index 1c8dc5b46c..14cb2eb17c 100644
--- a/packages/paste-theme/__tests__/themeProvider.spec.tsx
+++ b/packages/paste-theme/__tests__/themeProvider.spec.tsx
@@ -18,7 +18,7 @@ describe('Theme.Provider', () => {
it('should render the console link text color', (): void => {
const wrapper = mount(
-
+
);
@@ -36,7 +36,7 @@ describe('Theme.Provider', () => {
it('should rely on the default breakpoints set on the theme object', () => {
const wrapper = mount(
-
+
);
diff --git a/packages/paste-theme/__tests__/useTheme.spec.tsx b/packages/paste-theme/__tests__/useTheme.spec.tsx
index 3f32fc24c5..e9bd1ffa9f 100644
--- a/packages/paste-theme/__tests__/useTheme.spec.tsx
+++ b/packages/paste-theme/__tests__/useTheme.spec.tsx
@@ -11,7 +11,7 @@ const HookExampleComponent = (): React.ReactElement => {
describe('useTheme', () => {
it('should render without crashing', (): void => {
ReactDOM.render(
-
+
,
document.createElement('div')
@@ -20,7 +20,7 @@ describe('useTheme', () => {
it('should be able to access the theme object', () => {
const wrapper = mount(
-
+
);
diff --git a/packages/paste-theme/__tests__/withTheme.spec.tsx b/packages/paste-theme/__tests__/withTheme.spec.tsx
index 1d058372b7..71e94086fe 100644
--- a/packages/paste-theme/__tests__/withTheme.spec.tsx
+++ b/packages/paste-theme/__tests__/withTheme.spec.tsx
@@ -10,7 +10,7 @@ const MockComponentWithTheme = withTheme(MockComponent);
describe('withTheme', () => {
it('should render without crashing', (): void => {
ReactDOM.render(
-
+
,
document.createElement('div')
@@ -19,7 +19,7 @@ describe('withTheme', () => {
it('should be able to access the theme object', () => {
const wrapper = mount(
-
+
);
diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx
index 45233603da..3dad61a7f2 100644
--- a/packages/paste-theme/src/themeProvider.tsx
+++ b/packages/paste-theme/src/themeProvider.tsx
@@ -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 = ({
customBreakpoints,
- // theme = 'console' | 'sendgrid' | 'flex' & 'default' eventually
- theme = ThemeVariants.CONSOLE,
+ theme = ThemeVariants.DEFAULT,
...props
}) => {
let breakpoints = {};
@@ -52,8 +51,11 @@ const ThemeProvider: React.FunctionComponent = ({
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;
diff --git a/packages/paste-theme/stories/index.stories.tsx b/packages/paste-theme/stories/index.stories.tsx
index af2c46adff..9039f96aae 100644
--- a/packages/paste-theme/stories/index.stories.tsx
+++ b/packages/paste-theme/stories/index.stories.tsx
@@ -28,7 +28,7 @@ storiesOf('Overview|Theme', module)
},
})
.add('Provider', () => (
-
+
Using the Theme Provider to wrap your app
))