WIP themeprovider

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">