fix: Export css vars (#184)

* fix: Add missing getColorSchemeSelector method

* fix: Export css --mui vars

* fix: Export css variables using a custom provider

README.md

@@ -21,8 +21,7 @@ In your main ReactDOM renderer import Theme Provider and the theme you want to u
 ```tsx
 // ./src/index.ts
 ...
-import { ThemeProvider } from '@mui/material/styles'
-import { dark } from 'decentraland-ui2/lib/themes/theme'
+import { dark, ThemeProvider } from 'decentraland-ui2/dist/theme';
 ...
 
       <ThemeProvider theme={dark}>
@@ -50,6 +49,6 @@ Install dependencies and start Storybook:
 
 ```
 $ npm install
-$ npm run generate:storybooks // This will regenerate @MUI components
+$ npm run generate:storybooks //This will regenerate @MUI components
 $ npm run start
 ```

src/theme/colorSchemes.ts

@@ -5,6 +5,7 @@ const colorSchemas = {
   light: {
     palette: {
       mode: "light",
+      colorScheme: "light",
       text: {
         primary: "rgba(22, 21, 24, 0.9)",
         secondary: "rgba(22, 21, 24, 0.6)",
@@ -175,6 +176,7 @@ const colorSchemas = {
   dark: {
     palette: {
       mode: "dark",
+      colorScheme: "dark",
       text: {
         primary: "rgba(240,240,240, 1)",
         secondary: "rgba(240,240,240, 0.7)",

src/theme/index.ts

@@ -5,25 +5,21 @@ import {
 import createPalette, { Palette } from "@mui/material/styles/createPalette"
 import { colorSchemas } from "./colorSchemes"
 import { components } from "./components"
+import { ThemeProvider } from "./provider"
 import { typography } from "./typography"
 
 function theme(type: "light" | "dark"): ThemeOptions {
-  const palette = createPalette(colorSchemas[type].palette)
-
   return {
-    ...extendTheme({
-      palette,
-      typography: typography,
-      shape: {
-        borderRadius: 6,
-      },
-      components: components(colorSchemas[type].palette as Palette),
-    } as ThemeOptions),
-    palette,
+    palette: createPalette(colorSchemas[type].palette),
+    typography: typography,
+    shape: {
+      borderRadius: 6,
+    },
+    components: components(colorSchemas[type].palette as Palette),
   }
 }
 
-const light = theme("light")
-const dark = theme("dark")
+const light = extendTheme(theme("light"))
+const dark = extendTheme(theme("dark"))
 
-export { light, dark }
+export { light, dark, ThemeProvider }

src/theme/provider.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react"
+import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles"
+import { CssBaseline } from "@mui/material"
+import type { Theme } from "./types"
+
+export type ThemeProviderProps = {
+  theme: Theme
+  children: ReactNode
+}
+
+export const ThemeProvider = React.memo((props: ThemeProviderProps) => (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  <CssVarsProvider theme={props.theme as any}>
+    <CssBaseline />
+    {props.children}
+  </CssVarsProvider>
+))

src/theme/types.ts

@@ -0,0 +1,3 @@
+import { CssVarsTheme, ThemeOptions } from "@mui/material"
+
+export type Theme = ThemeOptions & Partial<CssVarsTheme>