feat: implement theme context (#255)

bylapidist · Jul 3, 2020 · a45610d · a45610d
1 parent 9c72ea9
commit a45610d
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 17 deletions.
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -41,7 +41,7 @@ const BaseButton: React.FC<ButtonPropType & ButtonProps> = ({
                     backgroundColor: ghost ? 'transparent' : color['base'],
                     textColor: ghost
                         ? { group: 'grey', shade: 'dark' }
-                        : { group: 'base', shade: 'white' },
+                        : { group: 'base', shade: 'light' },
                     textAlign: 'center',
                     paddingX: 2,
                     paddingY: small ? 1 : 2,
@@ -50,7 +50,7 @@ const BaseButton: React.FC<ButtonPropType & ButtonProps> = ({
                         ':hover': {
                             cursor: 'pointer',
                             backgroundColor: color['dark'],
-                            textColor: { group: 'base', shade: 'white' }
+                            textColor: { group: 'base', shade: 'light' }
                         },
                         ':hover:disabled': {
                             cursor: 'not-allowed',
@@ -62,7 +62,7 @@ const BaseButton: React.FC<ButtonPropType & ButtonProps> = ({
                             opacity: '0.7',
                             textColor: ghost
                                 ? { group: 'grey', shade: 'dark' }
-                                : { group: 'base', shade: 'white' },
+                                : { group: 'base', shade: 'light' },
                             backgroundColor: ghost
                                 ? { group: 'grey', shade: 'lightest' }
                                 : color['dark']

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -9,3 +9,5 @@ export * from './logo';
 export * from './responsive';
 export * from './text';
 export * from './theme-provider';
+export * from './theme-provider/defaultTheme';
+export * from './theme-provider/darkTheme';
diff --git a/src/components/link/__snapshots__/Link.spec.tsx.snap b/src/components/link/__snapshots__/Link.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`it works 1`] = `
 .c0 {
-  border-bottom-style: solid;
+  border-style: solid;
   font-size: inherit;
   font-weight: 400;
   font-family: Montserrat,sans-serif;

diff --git a/src/components/link/index.tsx b/src/components/link/index.tsx
@@ -14,7 +14,7 @@ export const Link: React.FC<LinkPropType> = ({
         as={as}
         styles={deepMerge(
             {
-                borderBottomStyle: 'solid',
+                borderStyle: 'solid',
                 borderBottomWidth: 1,
                 borderBottomColor: {
                     group: 'primary',

diff --git a/src/components/theme-provider/darkTheme.ts b/src/components/theme-provider/darkTheme.ts
@@ -0,0 +1,45 @@
+import { Theme } from '@lapidist/styles';
+
+export const darkTheme: Theme = {
+    boxShadows: {
+        '1':
+            '0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06)'
+    },
+    colors: {
+        base: {
+            light: 'black',
+            dark: 'white',
+            transparent: 'transparent'
+        },
+        grey: {
+            lightest: '#292B3E',
+            light: '#73748b',
+            base: '#d4d4d4',
+            dark: '#E8E8E8'
+        },
+        primary: {
+            lightest: '#1a8385',
+            light: '#17a3a5',
+            base: '#4AD6D8',
+            dark: '#9bfff8'
+        },
+        secondary: {
+            lightest: '#c99944',
+            light: '#ebc764',
+            base: '#fff08f',
+            dark: '#fdffb5'
+        },
+        tertiary: {
+            lightest: '#5A8C34',
+            light: '#72af5d',
+            base: '#A7D981',
+            dark: '#e2f7c9'
+        },
+        danger: {
+            lightest: '#810000',
+            light: '#b41e25',
+            base: '#E75158',
+            dark: '#FF848B'
+        }
+    }
+};
diff --git a/src/components/theme-provider/defaultTheme.ts b/src/components/theme-provider/defaultTheme.ts
@@ -127,8 +127,8 @@ export const defaultTheme: Theme = {
     },
     colors: {
         base: {
-            white: 'white',
-            black: 'black',
+            light: 'white',
+            dark: 'black',
             transparent: 'transparent'
         },
         grey: {

diff --git a/src/components/theme-provider/index.tsx b/src/components/theme-provider/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { Context, PropsWithChildren } from 'react';
 import {
     ThemeProvider as StyledThemeProvider,
     createGlobalStyle
@@ -35,7 +35,7 @@ const GlobalStyle = createGlobalStyle`
     article, aside, details, figcaption, figure,
     footer, header, hgroup, main, menu, nav, section { display: block; }
     *[hidden] { display: none; }
-    body { line-height: 1; font-size: 62.5% }
+    body { line-height: 1; font-size: 62.5%; }
     menu, ol, ul { list-style: none; }
     blockquote, q { quotes: none; }
     blockquote:before, blockquote:after,
@@ -50,16 +50,27 @@ export interface ThemeProviderProps extends PropsWithChildren<{}> {
     readonly theme?: Theme;
 }
 
+export const ThemeContext: Context<Theme> = React.createContext<Theme>(
+    defaultTheme
+);
+
+export const useTheme = (): Theme => React.useContext(ThemeContext);
+
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     children,
     theme
-}) => (
-    <>
-        <GlobalStyle />
-        <StyledThemeProvider theme={mergeThemes(defaultTheme, theme)}>
-            {children}
-        </StyledThemeProvider>
-    </>
-);
+}) => {
+    const initialTheme: Theme = useTheme();
+    const themeContext: Theme | undefined = mergeThemes(initialTheme, theme);
+
+    return (
+        <>
+            <GlobalStyle />
+            <StyledThemeProvider theme={themeContext}>
+                {children}
+            </StyledThemeProvider>
+        </>
+    );
+};
 
 ThemeProvider.displayName = 'ThemeProvider';