From 700b7068a157a0f9d3d6ce3f61150c2961d81617 Mon Sep 17 00:00:00 2001 From: fragosti 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/theme.ts') 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; + +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 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/theme.ts') 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; +// 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 Date: Wed, 3 Oct 2018 16:20:39 -0700 Subject: Add some ui components --- packages/instant/src/style/theme.ts | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) (limited to 'packages/instant/src/style/theme.ts') 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; +} = styledComponents as styledComponents.ThemedStyledComponentsModule; -// 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 ba2ba628e815c996582c6ead81f657a14a00abd0 Mon Sep 17 00:00:00 2001 From: fragosti 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/theme.ts') 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; +} = styledComponents; export type Theme = { [key in ColorOption]: string }; -- cgit v1.2.3 From 831b4a119393ba6884796ef9b45b7e47965ec046 Mon Sep 17 00:00:00 2001 From: fragosti 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/theme.ts') 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 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/theme.ts') 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