diff options
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 63 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 8 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/globalStyle.tsx | 23 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 4 |
4 files changed, 67 insertions, 31 deletions
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index a175c6901..6c29b3c43 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled from 'styled-components'; +import styled, { ThemeProvider } from 'styled-components'; import { Footer } from 'ts/@next/components/footer'; import { Header } from 'ts/@next/components/header'; @@ -9,23 +9,54 @@ import { GlobalStyles } from 'ts/@next/constants/globalStyle'; // Note(ez): We'll define the theme and provide it via a prop // e.g. theme dark/light/etc. interface Props { + theme?: 'dark' | 'light' | 'gray'; + children: any; +} + +interface GlobalThemes { + [key: string]: { + bgColor: string; + textColor: string; + } +} +const GLOBAL_THEMES: GlobalThemes = { + dark: { + bgColor: '#000000', + textColor: '#FFFFFF', + }, + light: { + bgColor: '#FFFFFF', + textColor: '#FFFFFF', + }, + gray: { + bgColor: '#e0e0e0', + textColor: '#FFFFFF', + }, } export const SiteWrap: React.StatelessComponent<Props> = props => { - const { children } = props; - - return ( - <> - {/* GlobalStyles will be exposed the theme via provider, - same is true for all children of SiteWrap - */} - <GlobalStyles /> - <Header /> - <Main> - {children} - </Main> - <Footer/> - </> - ); + const { + children, + theme = 'dark', + } = props; + const currentTheme = GLOBAL_THEMES[theme]; + + return ( + <> + <ThemeProvider theme={currentTheme}> + <> + <GlobalStyles /> + + <Header /> + + <Main> + { children } + </Main> + + <Footer/> + </> + </ThemeProvider> + </> + ); }; diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index c0d683973..9e16c9411 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled from 'styled-components'; +import styled, { withTheme } from 'styled-components'; import { colors } from 'ts/style/colors'; interface HeadingProps { @@ -47,7 +47,7 @@ const PARAGRAPH_SIZES: ParagraphSizes = { }; const StyledHeading = styled.h1<HeadingProps>` - color: ${props => props.color || colors.white}; + color: ${props => props.color || props.theme.textColor}; font-size: ${props => HEADING_SIZES[props.size || 'default']}; font-weight: 300; margin-bottom: ${props => !props.noMargin && '30px'}; @@ -60,7 +60,6 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { children, } = props; const Component = StyledHeading.withComponent(asElement); - return <Component {...props}>{children}</Component>; }; @@ -69,6 +68,7 @@ export const Paragraph = styled.p<ParagraphProps>` font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; margin-bottom: ${props => !props.noMargin && '30px'}; line-height: 1.4; - color: ${props => `rgba(255, 255, 255, ${props.muted || 0.75})`}; + color: ${props => props.color || props.theme.textColor}; + opacity: ${props => props.muted || 0.75}; text-align: ${props => props.center && 'center'}; `; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index d33a8e68c..72c8a933e 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -1,11 +1,16 @@ -import {createGlobalStyle} from 'styled-components'; +import { withTheme, createGlobalStyle } from 'styled-components'; import {cssReset} from 'ts/@next/constants/cssReset'; import {colors} from 'ts/style/colors'; -// Not sure if cssReset is already imported into index.tsx Also: currently -// createglobalStyle from styled-components is throwing a warning about how -// there's not typing exported from styled-comps -const GlobalStyles = createGlobalStyle ` + +interface GlobalStyle { + theme: { + bgColor: string; + textColor: string; + } +} + +const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` ${cssReset}; @font-face { @@ -24,13 +29,13 @@ const GlobalStyles = createGlobalStyle ` html { font-size: 18px; - background-color: ${colors.backgroundBlack}; + background-color: ${props => props.theme.bgColor}; } body { font-family: 'Formular', sans-serif !important; -webkit-font-smoothing: antialiased; - color: ${colors.white}; + color: ${props => props.theme.textColor}; } .visuallyHidden { @@ -58,6 +63,6 @@ const GlobalStyles = createGlobalStyle ` color: inherit; text-decoration: none; } -`; +`); -export {GlobalStyles}; +export { GlobalStyles }; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index a2afab97e..137bcda7d 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -25,8 +25,8 @@ import SupportIcon from 'ts/@next/icons/illustrations/support.svg'; </SiteWrap> */ -export const NextLanding = () => ( - <SiteWrap> +export const NextLanding: React.StatelessComponent<{}> = () => ( + <SiteWrap theme="dark"> <Section> <Wrap> <Column colWidth="1/2"> |