init: the first public commit for AFFiNE

libs/components/ui/src/theme/utils.tsx

@@ -0,0 +1,39 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {
+    createTheme,
+    ThemeProvider as MuiThemeProvider,
+    useTheme as muiUseTheme,
+    Theme as MuiTheme,
+} from '@mui/material/styles';
+import type { ThemeOptions as AffineThemeOptions } from './theme';
+import { Theme } from './theme';
+
+declare module '@mui/material/styles' {
+    interface Theme {
+        affine: AffineThemeOptions;
+    }
+    // allow configuration using `createTheme`
+    interface ThemeOptions {
+        affine: AffineThemeOptions;
+    }
+}
+
+const theme = createTheme({
+    affine: Theme,
+});
+
+export const ThemeProvider: FC<{ children?: ReactNode }> = ({ children }) => {
+    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+};
+
+export const useTheme = () => muiUseTheme();
+
+export const withTheme = <T,>(
+    Component: FC<T & { theme: MuiTheme }>
+): FC<T> => {
+    return props => {
+        const theme = useTheme();
+        return <Component {...props} theme={theme} />;
+    };
+};