Add styled-components with theme

2 files changed, 34 insertions, 1 deletions

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 };