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

))