Skip to content
Permalink
Browse files

fix: global styles by passing props (#169)

* fix: global styles by passing props

body styles from global props not rendered based on props not being passed
so there was no theme object to get the token values from

* fix: types
  • Loading branch information
SiTaggart committed Nov 11, 2019
1 parent 7380889 commit 65c15c090c88279faaa2d2c07f91ae8d845e3e20
Showing with 8 additions and 6 deletions.
  1. +8 −6 packages/paste-theme/src/themeProvider.tsx
@@ -1,18 +1,21 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {Global, css} from '@emotion/core';
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 {ThemeVariants} from './constants';

const pasteGlobalStyles = css`
interface GlobalStyleProps {
theme: {};
}
const pasteGlobalStyles = (props: GlobalStyleProps): SerializedStyles => css`
html {
font-size: 100%;
}
body {
margin: ${themeGet('space.space0')};
font-size: ${themeGet('fontSizes.fontSize30')};
margin: ${themeGet('space.space0')(props)};
font-size: ${themeGet('fontSizes.fontSize30')(props)};
}
`;

@@ -44,7 +47,6 @@ const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
let breakpoints = {};
let themeObject = {};

// when we have more theme-tokens themes, switch the object here based on the theme prop
switch (theme) {
case ThemeVariants.SENDGRID:
themeObject = SendGridTheme;
@@ -66,7 +68,7 @@ const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({

return (
<StyledThemeProvider theme={providerThemeProp}>
<Global styles={pasteGlobalStyles} />
<Global styles={pasteGlobalStyles({theme: providerThemeProp})} />
<StyledBase {...props} />
</StyledThemeProvider>
);

1 comment on commit 65c15c0

@now

This comment has been minimized.

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