From 700b7068a157a0f9d3d6ce3f61150c2961d81617 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 3 Oct 2018 14:08:08 -0700
Subject: Add styled-components with theme

---
 packages/instant/src/style/theme.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 packages/instant/src/style/theme.ts

(limited to 'packages/instant/src/style')

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 };
-- 
cgit v1.2.3


From 48e7aa6e77a71f694f75ab8b2fc86f337700113d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 3 Oct 2018 15:16:59 -0700
Subject: Add Inter UI font

---
 packages/instant/src/style/theme.ts | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 838378c99..0af233db2 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -8,12 +8,18 @@ const {
     ThemeProvider,
 } = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
 
+// Inject the inter-ui font into the page
+styledComponents.injectGlobal`
+    @import url('https://rsms.me/inter/inter-ui.css');
+`;
+
 export interface IThemeInterface {
     primaryColor: string;
     black: string;
     white: string;
     darkGrey: string;
     lightGrey: string;
+    fontFamily: string;
 }
 
 export const theme: IThemeInterface = {
@@ -22,6 +28,7 @@ export const theme: IThemeInterface = {
     lightGrey: '#999999',
     darkGrey: '#333333',
     white: 'white',
+    fontFamily: 'Inter UI, sans-serif',
 };
 
 export { styled, css, injectGlobal, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 4b8348da8cc50ef0da6e6b2bb7d276f1246437cf Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 3 Oct 2018 16:20:39 -0700
Subject: Add some ui components

---
 packages/instant/src/style/fonts.ts | 10 ++++++++++
 packages/instant/src/style/theme.ts | 23 +++++++++--------------
 2 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 packages/instant/src/style/fonts.ts

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
new file mode 100644
index 000000000..975a30a61
--- /dev/null
+++ b/packages/instant/src/style/fonts.ts
@@ -0,0 +1,10 @@
+import { injectGlobal } from './theme';
+
+export const fonts = {
+    include: () => {
+        // Inject the inter-ui font into the page
+        return injectGlobal`
+            @import url('https://rsms.me/inter/inter-ui.css');
+        `;
+    },
+};
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 0af233db2..3bced9071 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -6,29 +6,24 @@ const {
     injectGlobal,
     keyframes,
     ThemeProvider,
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
 
-// Inject the inter-ui font into the page
-styledComponents.injectGlobal`
-    @import url('https://rsms.me/inter/inter-ui.css');
-`;
+export type Theme = { [key in ColorOption]: string };
 
-export interface IThemeInterface {
-    primaryColor: string;
-    black: string;
-    white: string;
-    darkGrey: string;
-    lightGrey: string;
-    fontFamily: string;
+export enum ColorOption {
+    primaryColor = 'primaryColor',
+    black = 'black',
+    lightGrey = 'lightGrey',
+    darkGrey = 'darkGrey',
+    white = 'white',
 }
 
-export const theme: IThemeInterface = {
+export const theme: Theme = {
     primaryColor: '#512D80',
     black: 'black',
     lightGrey: '#999999',
     darkGrey: '#333333',
     white: 'white',
-    fontFamily: 'Inter UI, sans-serif',
 };
 
 export { styled, css, injectGlobal, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 85c34b17aa074e67ed9263094cc0ee75a8f00e60 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 14:04:56 -0700
Subject: Add Flex and Container component

---
 packages/instant/src/style/util.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 packages/instant/src/style/util.ts

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts
new file mode 100644
index 000000000..7cf13133f
--- /dev/null
+++ b/packages/instant/src/style/util.ts
@@ -0,0 +1,10 @@
+import * as _ from 'lodash';
+
+export const cssRuleIfExists = (props: any, rule: string): string => {
+    const camelCaseRule = _.camelCase(rule);
+    const ruleValueIfExists = props[camelCaseRule];
+    if (!_.isUndefined(ruleValueIfExists)) {
+        return `${rule}: ${ruleValueIfExists};`;
+    }
+    return '';
+};
-- 
cgit v1.2.3


From ba2ba628e815c996582c6ead81f657a14a00abd0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 15:02:06 -0700
Subject: Fix linting problems

---
 packages/instant/src/style/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 3bced9071..9eb6ccb56 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -6,7 +6,7 @@ const {
     injectGlobal,
     keyframes,
     ThemeProvider,
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
+} = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
-- 
cgit v1.2.3


From 831b4a119393ba6884796ef9b45b7e47965ec046 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 15:57:48 -0700
Subject: apply prettier

---
 packages/instant/src/style/theme.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 9eb6ccb56..02f890492 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,12 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const {
-    default: styled,
-    css,
-    injectGlobal,
-    keyframes,
-    ThemeProvider,
-} = styledComponents;
+const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
-- 
cgit v1.2.3


From d9b7aa2e4ba088b4dda1b1d2956de5d267a0674e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 17:22:36 -0700
Subject: Add faux order details section

---
 packages/instant/src/style/theme.ts | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 02f890492..cf9da5378 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -8,6 +8,8 @@ export enum ColorOption {
     primaryColor = 'primaryColor',
     black = 'black',
     lightGrey = 'lightGrey',
+    grey = 'grey',
+    feintGrey = 'feintGrey',
     darkGrey = 'darkGrey',
     white = 'white',
 }
@@ -16,6 +18,8 @@ export const theme: Theme = {
     primaryColor: '#512D80',
     black: 'black',
     lightGrey: '#999999',
+    grey: '#666666',
+    feintGrey: '#DEDEDE',
     darkGrey: '#333333',
     white: 'white',
 };
-- 
cgit v1.2.3


From 0aa7bfab0d62a11e84b81044e6af6e2c5ec6b981 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 10 Oct 2018 16:48:27 -0700
Subject: Add type to cssRuleIfExists

---
 packages/instant/src/style/util.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts
index 7cf13133f..c9df0f834 100644
--- a/packages/instant/src/style/util.ts
+++ b/packages/instant/src/style/util.ts
@@ -1,6 +1,7 @@
+import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 
-export const cssRuleIfExists = (props: any, rule: string): string => {
+export const cssRuleIfExists = (props: ObjectMap<any>, rule: string): string => {
     const camelCaseRule = _.camelCase(rule);
     const ruleValueIfExists = props[camelCaseRule];
     if (!_.isUndefined(ruleValueIfExists)) {
-- 
cgit v1.2.3


From 0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 12 Oct 2018 15:35:20 -0700
Subject: feat(instant): add sliding error

---
 packages/instant/src/style/theme.ts | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index cf9da5378..d26c816c1 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -12,6 +12,8 @@ export enum ColorOption {
     feintGrey = 'feintGrey',
     darkGrey = 'darkGrey',
     white = 'white',
+    lightOrange = 'lightOrange',
+    darkOrange = 'darkOrange',
 }
 
 export const theme: Theme = {
@@ -22,6 +24,8 @@ export const theme: Theme = {
     feintGrey: '#DEDEDE',
     darkGrey: '#333333',
     white: 'white',
+    lightOrange: '#F9F2ED',
+    darkOrange: '#F2994C',
 };
 
 export { styled, css, injectGlobal, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 9f924e459c43c023e35ab7222cd9824cc0e67411 Mon Sep 17 00:00:00 2001
From: Jacob Evans <jacob@dekz.net>
Date: Thu, 18 Oct 2018 21:51:56 +1100
Subject: chore: change package org from 0xproject to 0x

---
 packages/instant/src/style/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts
index c9df0f834..3e38c4a7d 100644
--- a/packages/instant/src/style/util.ts
+++ b/packages/instant/src/style/util.ts
@@ -1,4 +1,4 @@
-import { ObjectMap } from '@0xproject/types';
+import { ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 
 export const cssRuleIfExists = (props: ObjectMap<any>, rule: string): string => {
-- 
cgit v1.2.3


From 43ad2fe23bec01b077f5c55a23736fdcb24781a3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:34:42 -0700
Subject: feat: upgrade to styled-components v4

---
 packages/instant/src/style/fonts.ts | 10 +++++-----
 packages/instant/src/style/theme.ts |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
index 975a30a61..f305fd612 100644
--- a/packages/instant/src/style/fonts.ts
+++ b/packages/instant/src/style/fonts.ts
@@ -1,10 +1,10 @@
-import { injectGlobal } from './theme';
-
 export const fonts = {
     include: () => {
         // Inject the inter-ui font into the page
-        return injectGlobal`
-            @import url('https://rsms.me/inter/inter-ui.css');
-        `;
+        const head = document.head || document.getElementsByTagName('head')[0];
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`));
+        head.appendChild(style);
     },
 };
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index d26c816c1..be527a12c 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -28,4 +28,4 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
 };
 
-export { styled, css, injectGlobal, keyframes, ThemeProvider };
+export { styled, css, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From f89b314a94f867fa905a1ce18eba9336ee4d1634 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 12:52:32 -0700
Subject: fix: address PR feedback

---
 packages/instant/src/style/fonts.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
index f305fd612..92450502d 100644
--- a/packages/instant/src/style/fonts.ts
+++ b/packages/instant/src/style/fonts.ts
@@ -1,10 +1,10 @@
 export const fonts = {
     include: () => {
         // Inject the inter-ui font into the page
-        const head = document.head || document.getElementsByTagName('head')[0];
+        const appendTo = document.head || document.getElementsByTagName('head')[0] || document.body;
         const style = document.createElement('style');
         style.type = 'text/css';
         style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`));
-        head.appendChild(style);
+        appendTo.appendChild(style);
     },
 };
-- 
cgit v1.2.3


From d5d99b9d2e3c793a95c68c1035246644b3ae80c6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 25 Oct 2018 18:35:06 -0700
Subject: chore: dont override toString of BigNumber and other PR feedback

---
 packages/instant/src/style/theme.ts | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index be527a12c..6575ff9f4 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -28,4 +28,6 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
 };
 
+export const transparentWhite = 'rgba(255,255,255,0.3)';
+
 export { styled, css, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 475698ed92dc6310591ec9d0653eaa931d7e03f6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 29 Oct 2018 17:02:46 -0700
Subject: feat: add basic panel component and other small improvements

---
 packages/instant/src/style/z_index.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/instant/src/style/z_index.ts

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
new file mode 100644
index 000000000..727a5189d
--- /dev/null
+++ b/packages/instant/src/style/z_index.ts
@@ -0,0 +1,5 @@
+export const zIndex = {
+    errorPopup: 1,
+    mainContainer: 2,
+    panel: 3,
+};
-- 
cgit v1.2.3


From c2645b26b457c66b3adcb98a5c089eba3e72f458 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 31 Oct 2018 15:09:12 -0700
Subject: feat(instant): add interactive overlay presentation to umd bundle

---
 packages/instant/src/style/theme.ts | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 6575ff9f4..c7cb0bebe 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -14,6 +14,7 @@ export enum ColorOption {
     white = 'white',
     lightOrange = 'lightOrange',
     darkOrange = 'darkOrange',
+    clear = 'clear',
 }
 
 export const theme: Theme = {
@@ -26,8 +27,10 @@ export const theme: Theme = {
     white: 'white',
     lightOrange: '#F9F2ED',
     darkOrange: '#F2994C',
+    clear: 'rgba(0, 0, 0, 0.0)',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
+export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
 
 export { styled, css, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From d16499da4e0611438df7bfe226bce940beca6918 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 1 Nov 2018 15:23:42 -0700
Subject: Remove alternate hover styling from button and move into icon
 component

---
 packages/instant/src/style/theme.ts | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index c7cb0bebe..e81694620 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -14,7 +14,6 @@ export enum ColorOption {
     white = 'white',
     lightOrange = 'lightOrange',
     darkOrange = 'darkOrange',
-    clear = 'clear',
 }
 
 export const theme: Theme = {
@@ -27,7 +26,6 @@ export const theme: Theme = {
     white: 'white',
     lightOrange: '#F9F2ED',
     darkOrange: '#F2994C',
-    clear: 'rgba(0, 0, 0, 0.0)',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
-- 
cgit v1.2.3


From 180f176716b57d43e2988b5db3a2423c7974177e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 16:41:08 -0700
Subject: feat: use withTheme to use ColorOption to color Icon

---
 packages/instant/src/style/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index e81694620..8a5d56927 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, keyframes, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, withTheme, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -31,4 +31,4 @@ export const theme: Theme = {
 export const transparentWhite = 'rgba(255,255,255,0.3)';
 export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
 
-export { styled, css, keyframes, ThemeProvider };
+export { styled, css, keyframes, withTheme, ThemeProvider };
-- 
cgit v1.2.3


From cdaa1407dacacc53e01a70b1e0ac46536342a4e0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 18:36:34 -0700
Subject: feat: implement search bar UI

---
 packages/instant/src/style/theme.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 8a5d56927..d10c9b72c 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -10,6 +10,7 @@ export enum ColorOption {
     lightGrey = 'lightGrey',
     grey = 'grey',
     feintGrey = 'feintGrey',
+    lightestGrey = 'lightestGrey',
     darkGrey = 'darkGrey',
     white = 'white',
     lightOrange = 'lightOrange',
@@ -17,11 +18,12 @@ export enum ColorOption {
 }
 
 export const theme: Theme = {
-    primaryColor: '#512D80',
+    primaryColor: '#333',
     black: 'black',
     lightGrey: '#999999',
     grey: '#666666',
     feintGrey: '#DEDEDE',
+    lightestGrey: '#EEEEEE',
     darkGrey: '#333333',
     white: 'white',
     lightOrange: '#F9F2ED',
-- 
cgit v1.2.3


From a2bc62b17a773625220817c79265c017cb61979f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 10:26:39 -0800
Subject: feat(instant): when on mobile, show mobile specific styling that
 takes up whole screen

---
 packages/instant/src/style/media.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 packages/instant/src/style/media.ts

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
new file mode 100644
index 000000000..fa7571077
--- /dev/null
+++ b/packages/instant/src/style/media.ts
@@ -0,0 +1,19 @@
+import { css } from './theme';
+
+export enum ScreenWidths {
+    Sm = 40,
+    Md = 52,
+    Lg = 64,
+}
+
+const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
+    @media (max-width: ${screenWidth}em) {
+        ${css.apply(css, args)};
+    }
+`;
+
+export const media = {
+    small: generateMediaWrapper(ScreenWidths.Sm),
+    medium: generateMediaWrapper(ScreenWidths.Md),
+    large: generateMediaWrapper(ScreenWidths.Lg),
+};
-- 
cgit v1.2.3


From f90486c99c7acf95f3b95fdc73ee125dd3f9086e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 11:34:04 -0800
Subject: wip: mediachoice experiment

---
 packages/instant/src/style/media.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index fa7571077..5a0cba668 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -1,3 +1,5 @@
+import { InterpolationValue } from 'styled-components';
+
 import { css } from './theme';
 
 export enum ScreenWidths {
@@ -17,3 +19,14 @@ export const media = {
     medium: generateMediaWrapper(ScreenWidths.Md),
     large: generateMediaWrapper(ScreenWidths.Lg),
 };
+
+/// media helper
+export interface MediaChoice {
+    sm: string;
+    md?: string;
+    lg?: string;
+}
+// TODO: handle string too
+export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
+    return media.small`width: ${choice.sm}`;
+};
-- 
cgit v1.2.3


From e8814ecbe70b97dfa0de0f51b6a3b7e7fcd89ea2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 13:52:16 -0800
Subject: proof of concept working

---
 packages/instant/src/style/media.ts | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 5a0cba668..84b85a2a8 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -21,12 +21,29 @@ export const media = {
 };
 
 /// media helper
-export interface MediaChoice {
-    sm: string;
+export interface ScreenSpecifications {
+    default: string;
+    sm?: string;
     md?: string;
     lg?: string;
 }
+export type MediaChoice = string | ScreenSpecifications;
 // TODO: handle string too
 export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
-    return media.small`width: ${choice.sm}`;
+    let res: InterpolationValue[];
+    if (typeof choice === 'string') {
+        res = css`
+            width: ${choice};
+        `;
+    } else {
+        res = css`
+            width: ${choice.default};
+            ${choice.lg && media.large`width: ${choice.lg}`}
+            ${choice.md && media.medium`width: ${choice.md}`}
+            ${choice.sm && media.small`width: ${choice.sm}`}
+        `;
+    }
+
+    console.log(res.toString());
+    return res;
 };
-- 
cgit v1.2.3


From 88c7d907fa97f7918b82df8c1759b43c28c7273b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 13:56:29 -0800
Subject: better function definiton

---
 packages/instant/src/style/media.ts | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 84b85a2a8..4bcbd608f 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -28,22 +28,17 @@ export interface ScreenSpecifications {
     lg?: string;
 }
 export type MediaChoice = string | ScreenSpecifications;
-// TODO: handle string too
-export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
-    let res: InterpolationValue[];
+export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => {
     if (typeof choice === 'string') {
-        res = css`
-            width: ${choice};
-        `;
-    } else {
-        res = css`
-            width: ${choice.default};
-            ${choice.lg && media.large`width: ${choice.lg}`}
-            ${choice.md && media.medium`width: ${choice.md}`}
-            ${choice.sm && media.small`width: ${choice.sm}`}
+        return css`
+            ${cssPropertyName}: ${choice};
         `;
     }
 
-    console.log(res.toString());
-    return res;
+    return css`
+        ${cssPropertyName}: ${choice.default};
+        ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`}
+        ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`}
+        ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`}
+    `;
 };
-- 
cgit v1.2.3


From 006a13448fc5d79aa8f6d04ac3f471e430dcfa89 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:05:49 -0800
Subject: new MediaChoice approach for setting conditional css properties

---
 packages/instant/src/style/media.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/instant/src/style')

diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 4bcbd608f..beabbac46 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -14,13 +14,12 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) =>
     }
 `;
 
-export const media = {
+const media = {
     small: generateMediaWrapper(ScreenWidths.Sm),
     medium: generateMediaWrapper(ScreenWidths.Md),
     large: generateMediaWrapper(ScreenWidths.Lg),
 };
 
-/// media helper
 export interface ScreenSpecifications {
     default: string;
     sm?: string;
-- 
cgit v1.2.3