From 6ec6ca8cbc52126a28ab9b6d833343854ad5ea99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20D=C3=ADaz?= Date: Wed, 28 Aug 2024 10:21:15 -0300 Subject: [PATCH] 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-lock.json | 9 +++++---- package.json | 2 +- src/theme/components.ts | 30 ------------------------------ src/theme/index.ts | 21 +++++++++++++-------- 4 files changed, 19 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 822c0a1..92eb9bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "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", @@ -2323,9 +2323,10 @@ } }, "node_modules/@dcl/ui-env": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@dcl/ui-env/-/ui-env-1.5.0.tgz", - "integrity": "sha512-XxUznNb56JWpYWj8ZmuoS+RsXr2HanqMeKdPvqxkFvttjaec8N9BCg0jrfDxw2Q9T4hxYprjQfPzV5hQTqceNw==" + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@dcl/ui-env/-/ui-env-1.5.1.tgz", + "integrity": "sha512-03cPMH3wrNK5bdDEoidnXIr0ZpGPe0ly8ObDNwik6PjXF+g2YBAbo5/jDUN0panddL6N6YnCJROP8NkZl/ThnQ==", + "license": "ISC" }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", diff --git a/package.json b/package.json index 1691bec..325cd71 100644 --- a/package.json +++ b/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", diff --git a/src/theme/components.ts b/src/theme/components.ts index 06465a1..2ae35b6 100644 --- a/src/theme/components.ts +++ b/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": { diff --git a/src/theme/index.ts b/src/theme/index.ts index a3f9ccd..671dfdb 100644 --- a/src/theme/index.ts +++ b/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 }