Add some ui components

2 files changed, 19 insertions, 14 deletions

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