Add styled-components with theme

3 files changed, 38 insertions, 2 deletions

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 365312a70..9f97b1caa 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -51,7 +51,10 @@
         "ethereum-types": "^1.0.8",
         "lodash": "^4.17.10",
         "react": "^16.5.2",
-        "react-dom": "^16.5.2"
+        "react-dom": "^16.5.2",
+        "react-redux": "^5.0.7",
+        "redux": "^4.0.0",
+        "styled-components": "^3.4.9"
     },
     "devDependencies": {
         "@0xproject/tslint-config": "^1.0.7",
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 67e1b683d..43398cf3b 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
 
+import { ThemeProvider } from '../style/theme';
+
 export interface ZeroExInstantProps {}
 
-export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => <div>ZeroExInstant</div>;
+export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => (
+    <ThemeProvider>
+        <div> ZeroExInstant </div>
+    </ThemeProvider>
+);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
new file mode 100644
index 000000000..838378c99
--- /dev/null
+++ b/packages/instant/src/style/theme.ts
@@ -0,0 +1,27 @@
+import * as styledComponents from 'styled-components';
+
+const {
+    default: styled,
+    css,
+    injectGlobal,
+    keyframes,
+    ThemeProvider,
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
+
+export interface IThemeInterface {
+    primaryColor: string;
+    black: string;
+    white: string;
+    darkGrey: string;
+    lightGrey: string;
+}
+
+export const theme: IThemeInterface = {
+    primaryColor: '#512D80',
+    black: 'black',
+    lightGrey: '#999999',
+    darkGrey: '#333333',
+    white: 'white',
+};
+
+export { styled, css, injectGlobal, keyframes, ThemeProvider };