fix: Theme missing palette reference (#179)

* chore: Upgrade package @dcl/ui-env

* fix: Add palette reference when extending the theme

* fix: Remove `display: "none"` from primary buttons

* fix: Send palette object to the extendTheme method

* fix: Remove the selector :not(.Mui-disabled) for buttons to avoid overwriting the text color when not required

package.json

@@ -38,7 +38,7 @@
   "homepage": "https://github.com/decentraland/ui2#readme",
   "dependencies": {
     "@dcl/schemas": "^11.10.5",
-    "@dcl/ui-env": "^1.5.0",
+    "@dcl/ui-env": "^1.5.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.16.0",

src/theme/components.ts

@@ -55,10 +55,8 @@ export const components = (
           borderRadius: "var(--mui-shape-borderRadius)",
           opacity: "1",
           "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
             background: "#FF2D55",
             boxShadow: "none",
-            display: "none",
           },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-contrast)",
@@ -415,10 +413,8 @@ export const components = (
           borderRadius: "var(--mui-shape-borderRadius)",
           opacity: "1",
           "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
             background: "#FF2D55",
             boxShadow: "none",
-            display: "none",
           },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-contrast)",
@@ -768,10 +764,8 @@ export const components = (
           borderRadius: "var(--mui-shape-borderRadius)",
           opacity: "1",
           "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
             background: "#FF2D55",
             boxShadow: "none",
-            display: "none",
           },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-contrast)",
@@ -1118,10 +1112,6 @@ export const components = (
           lineHeight: "24px /* 160% */",
           letterSpacing: "0.46px",
           textTransform: "uppercase",
-          "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
-            display: "none",
-          },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-main)",
             "& .MuiTouchRipple-root": {
@@ -1384,10 +1374,6 @@ export const components = (
           lineHeight: "24px /* 171.429% */",
           letterSpacing: "0.4px",
           textTransform: "uppercase",
-          "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
-            display: "none",
-          },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-main)",
             "& .MuiTouchRipple-root": {
@@ -1643,10 +1629,6 @@ export const components = (
           lineHeight: "24px /* 184.615% */",
           letterSpacing: "0.46px",
           textTransform: "uppercase",
-          "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
-            display: "none",
-          },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-main)",
             "& .MuiTouchRipple-root": {
@@ -1902,10 +1884,6 @@ export const components = (
           lineHeight: "24px /* 171.429% */",
           letterSpacing: "0.4px",
           textTransform: "uppercase",
-          "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
-            display: "none",
-          },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-main)",
             "& .MuiTouchRipple-root": {
@@ -2144,10 +2122,6 @@ export const components = (
           lineHeight: "24px /* 160% */",
           letterSpacing: "0.46px",
           textTransform: "uppercase",
-          "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
-            display: "none",
-          },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-main)",
             "& .MuiTouchRipple-root": {
@@ -2392,10 +2366,6 @@ export const components = (
           lineHeight: "24px /* 184.615% */",
           letterSpacing: "0.46px",
           textTransform: "uppercase",
-          "&:not(.Mui-disabled):not(.Mui-focusVisible):not(:hover)": {
-            color: "var(--mui-palette-action-disabled)",
-            display: "none",
-          },
           "&:not(.Mui-disabled).Mui-focusVisible:not(:hover)": {
             color: "var(--mui-palette-primary-main)",
             "& .MuiTouchRipple-root": {

src/theme/index.ts

@@ -8,17 +8,22 @@ import { components } from "./components"
 import { typography } from "./typography"
 
 function theme(type: "light" | "dark"): ThemeOptions {
+  const palette = createPalette(colorSchemas[type].palette)
+
   return {
-    palette: createPalette(colorSchemas[type].palette),
-    typography: typography,
-    shape: {
-      borderRadius: 6,
-    },
-    components: components(colorSchemas[type].palette as Palette),
+    ...extendTheme({
+      palette,
+      typography: typography,
+      shape: {
+        borderRadius: 6,
+      },
+      components: components(colorSchemas[type].palette as Palette),
+    } as ThemeOptions),
+    palette,
   }
 }
 
-const light = extendTheme(theme("light"))
-const dark = extendTheme(theme("dark"))
+const light = theme("light")
+const dark = theme("dark")
 
 export { light, dark }