fix(ThemeProvider): allow passing custom themes

src/lib/ThemeProvider/ThemeProvider.tsx

@@ -1,30 +1,37 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import Box from '../Box';
-import { themes } from '../theme/themes';
+import { themes, Swatch } from '../theme/themes';
+import { css } from '../stitches.config';
 
-type Theme = keyof typeof themes;
+type ThemeName = keyof typeof themes;
 
 type Props = {
-  theme?: Theme;
+  theme?: ThemeName | Swatch;
 };
 
 const themeContext = createContext<Props['theme']>('blue');
 
-const css = {
+const styles = {
   display: 'contents',
 };
 
-const ThemeProvider: React.FC<Props> = ({ theme, children }) => {
+const ThemeProvider: React.FC<Props> = ({ theme = 'blue', children }) => {
   const contextTheme = useContext(themeContext);
-  const themeClass = themes[(theme as Theme) || (contextTheme as Theme)];
+  const themeClass = useMemo(() => {
+    if (typeof theme === 'string') {
+      return themes[(theme as ThemeName) || (contextTheme as ThemeName)];
+    }
+
+    return css.theme(theme);
+  }, [contextTheme, theme]);
 
   if (!themeClass) {
     return <>{children}</>;
   }
 
   return (
     <themeContext.Provider value={theme}>
-      <Box className={themeClass} css={css} as="span">
+      <Box className={themeClass} css={styles} as="span">
         {children}
       </Box>
     </themeContext.Provider>

src/lib/theme/themes.ts

@@ -49,7 +49,7 @@ export const themes = Object.fromEntries(swatches.map(([name, swatch]) => [name,
 
 type Themes = { [Shade in keyof typeof palette]: string };
 
-type Swatch = {
+export type Swatch = {
   colors: {
     $text: string;
     $primaryStill: string;

src/pages/components/Button.mdx

@@ -45,8 +45,7 @@ import { Box, Stack, Inline, Button, ThemeProvider, Icon } from '@fxtrot/ui';
 
 ## Theming
 
-Use `ThemeProvider` component to change the primary color of the button
-(or any other component that uses primary colors)
+Use `ThemeProvider` component to change the primary color of the button.
 
 <Playground>
   <ThemeProvider theme="black">