feat: cleanup theme

ccontrols · Jun 10, 2020 · 91d2206 · 91d2206
1 parent 526720b
commit 91d2206
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 184 deletions.
diff --git a/ui/components/src/ThemeContext/ThemeContext.tsx b/ui/components/src/ThemeContext/ThemeContext.tsx
@@ -1,31 +1,9 @@
 import React from 'react';
-import polaris from '@theme-ui/preset-polaris';
-import { get } from '@theme-ui/css';
 import { merge } from 'theme-ui';
-import {
-  ThemeProvider as ThemeUIProvider,
-  Theme,
-  IntrinsicSxElements,
-} from 'theme-ui';
-import { transparentize } from 'polished';
+import { ThemeProvider as ThemeUIProvider, Theme } from 'theme-ui';
 
-import { markdownComponents } from '../Markdown';
-
-type ProvidedComponentsKnownKeys = {
-  [key in keyof IntrinsicSxElements]?: React.ComponentType<any> | string;
-};
-export interface ProvidedComponents extends ProvidedComponentsKnownKeys {
-  [key: string]: React.ComponentType<any> | string | undefined;
-}
-
-export interface ThemeUIProviderProps<Theme> {
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
-  children?: React.ReactNode;
-  components?: ProvidedComponents;
-}
-const ThemeUIProviderExt: <Theme>(
-  props: ThemeUIProviderProps<Theme>,
-) => React.ReactElement = ThemeUIProvider;
+import { markdownComponents, MarkdownComponentType } from '../Markdown';
+import { theme as defaultTheme } from './theme';
 
 export interface ThemeContextProps {
   theme?: Theme;
@@ -37,174 +15,22 @@ export interface ThemeProviderProps {
   /**
    * components to customize the markdown display.
    */
-  components?: ProvidedComponents;
+  components?: MarkdownComponentType;
   dark?: boolean;
   theme?: Theme;
 }
 
-const applyColorMode = (theme: Theme, dark?: boolean) => {
-  if (!dark) {
-    return theme;
-  }
-  const modes = get(theme, 'colors.modes', {});
-  return merge(theme, {
-    colors: get(modes, 'dark', {}),
-  });
-};
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   theme: customTheme,
   children,
   dark,
   components = {},
 }) => {
   const theme = React.useMemo(() => {
-    const defTheme = customTheme || polaris;
-    return applyColorMode(
-      {
-        ...defTheme,
-        defaultBreakpoints: [40, 52, 64].map(n => n + 'em'),
-        initialColorModeName: dark ? 'dark' : 'default',
-        forms: {
-          checkbox: {
-            cursor: 'pointer',
-            border: (t: Theme) => `1px solid ${t?.colors?.text}`,
-            '&:focus': {
-              backgroundColor: 'transarent',
-              boxShadow: (t: Theme) => `0 0 0 2px ${t?.colors?.primary}`,
-              outline: 'none',
-            },
-          },
-        },
-        fonts: {
-          ...defTheme.fonts,
-          serif:
-            'medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif',
-        },
-        fontSizes: [12, 14, 16, 20, 24, 32, 42, 64, 96],
-        styles: {
-          ...defTheme.styles,
-          a: {
-            ...defTheme.styles.a,
-            transition: `all 0.3s ease-in-out`,
-          },
-          img: {
-            ...defTheme.styles.img,
-            maxWidth: '100%',
-          },
-          h1: {
-            ...defTheme.styles.h1,
-            fontFamily: 'serif',
-            fontSize: 6,
-          },
-          p: {
-            fontSize: 3,
-            py: 2,
-          },
-          ol: {
-            fontSize: 3,
-          },
-          ul: {
-            fontSize: 3,
-            py: 2,
-          },
-          table: {
-            margin: 0,
-            borderCollapse: 'collapse',
-            fontSize: '14px',
-            lineHeight: '20px',
-            textAlign: 'left',
-            width: '100%',
-            borderSpacing: '0px',
-          },
-          th: {
-            border: 'none',
-            padding: '10px 0 10px 20px',
-          },
-          tbody: {
-            'tr:last-of-type': {
-              borderBottom: 0,
-            },
-          },
-          thead: {
-            borderBottom: '1px solid #999',
-            backgroundColor: 'header',
-            color: 'text',
-          },
-          td: {
-            padding: '16px 20px',
-            borderBottom: 0,
-          },
-          tdgroup: {
-            lineHeight: '24px',
-            background: '#fafbfc',
-            whiteSpace: 'nowrap',
-            padding: '16px 20px',
-            fontWeight: 700,
-            fontFamily: 'monospace',
-          },
-          tr: {
-            borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
-          },
-        },
-        buttons: {
-          primary: {
-            color: '#333',
-            bg: '#f3f3f3',
-            borderRadius: 5,
-            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset',
-          },
-          secondary: {
-            bg: 'action',
-          },
-        },
-        cards: {
-          primary: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            padding: 2,
-            borderRadius: 4,
-            boxShadow: '0 0 8px rgba(0, 0, 0, 0.125)',
-          },
-        },
-        links: {
-          nav: {
-            fontWeight: 300,
-            fontSize: '14px',
-            lineHeight: '1.6rem',
-            '&.active': {
-              fontWeight: 700,
-              color: 'primary',
-            },
-          },
-        },
-        colors: {
-          ...polaris.colors,
-          gray: '#f6f6f6',
-          sidebar: '#f6f6f6',
-          header: '#edebe8',
-          highlight: '#d9f2f1',
-          action: '#3B817D',
-          selected: '#027AC5',
-          fadedText: '#69768C',
-          shadow: transparentize(0.9, defTheme.colors.text),
-          modes: {
-            dark: {
-              ...(defTheme.colors.modes ? defTheme.colors.modes.dark : {}),
-              background: '#38404a',
-              sidebar: '#000',
-              text: '#d3d4db',
-              header: '#111111',
-              fadedText: '#c9cacf',
-              selected: '#b3d9ff',
-              action: '#d9f2f1',
-              shadow: transparentize(0.9, '#d3d4db'),
-            },
-          },
-        },
-      },
-      dark,
-    );
+    return {
+      ...(customTheme ? merge(defaultTheme, customTheme) : defaultTheme),
+      initialColorModeName: dark ? 'dark' : 'default',
+    };
   }, [dark, customTheme]);
   return (
     <ThemeContext.Provider
@@ -213,12 +39,13 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
         dark,
       }}
     >
-      <ThemeUIProviderExt
+      <ThemeUIProvider
         theme={theme}
+        //@ts-ignore
         components={{ ...markdownComponents, ...components }}
       >
         {children}
-      </ThemeUIProviderExt>
+      </ThemeUIProvider>
     </ThemeContext.Provider>
   );
 };
diff --git a/ui/components/src/ThemeContext/index.ts b/ui/components/src/ThemeContext/index.ts
@@ -1 +1,2 @@
 export * from './ThemeContext';
+export * from './theme';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './ThemeContext';
		export * from './theme';