From a45610d43c1a4f2f50cbaa6c8ccf59bdb5f7f1a8 Mon Sep 17 00:00:00 2001 From: Brett Dorrans Date: Fri, 3 Jul 2020 19:06:41 +0100 Subject: [PATCH] feat: implement theme context (#255) --- src/components/button/index.tsx | 6 +-- src/components/index.ts | 2 + .../link/__snapshots__/Link.spec.tsx.snap | 2 +- src/components/link/index.tsx | 2 +- src/components/theme-provider/darkTheme.ts | 45 +++++++++++++++++++ src/components/theme-provider/defaultTheme.ts | 4 +- src/components/theme-provider/index.tsx | 31 ++++++++----- 7 files changed, 75 insertions(+), 17 deletions(-) create mode 100644 src/components/theme-provider/darkTheme.ts diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx index 026ee0ec..de82c722 100644 --- a/src/components/button/index.tsx +++ b/src/components/button/index.tsx @@ -41,7 +41,7 @@ const BaseButton: React.FC = ({ 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 = ({ ':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 = ({ 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 index 0ac1a609..66e84c4c 100644 --- 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 index 537e4448..946305aa 100644 --- 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 index f2f43fa1..0454887e 100644 --- a/src/components/link/index.tsx +++ b/src/components/link/index.tsx @@ -14,7 +14,7 @@ export const Link: React.FC = ({ 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 new file mode 100644 index 00000000..a96e9780 --- /dev/null +++ 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 index 572a0726..0dc30ade 100644 --- 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 index e9218361..3822d058 100644 --- 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 = React.createContext( + defaultTheme +); + +export const useTheme = (): Theme => React.useContext(ThemeContext); + export const ThemeProvider: React.FC = ({ children, theme -}) => ( - <> - - - {children} - - -); +}) => { + const initialTheme: Theme = useTheme(); + const themeContext: Theme | undefined = mergeThemes(initialTheme, theme); + + return ( + <> + + + {children} + + + ); +}; ThemeProvider.displayName = 'ThemeProvider';