mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-09 01:17:06 +02:00
fix: Use the right theme even if the payload is a variant. (#9292)
Also, use extra css selectors to increase specificity so that this takes precedence over the MUI themes. I don't like that we need to do this weird selector thing, but hey, it is what it is.
This commit is contained in:
parent
cac38b0cee
commit
abb0450a6a
@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
|
|||||||
hidden=""
|
hidden=""
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-l6m2tn-MuiButtonBase-root-MuiButton-root"
|
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ln3ri4-MuiButtonBase-root-MuiButton-root"
|
||||||
disabled=""
|
disabled=""
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
@ -75,7 +75,7 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
aria-labelledby="useId-0"
|
aria-labelledby="useId-0"
|
||||||
className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1xfu7h-MuiButtonBase-root-MuiButton-root"
|
className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1cn29am-MuiButtonBase-root-MuiButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
@ -7,6 +7,7 @@ import legacyLightTheme from 'themes/theme.legacy';
|
|||||||
import legacyDarkTheme from 'themes/dark-theme.legacy';
|
import legacyDarkTheme from 'themes/dark-theme.legacy';
|
||||||
import type { Theme } from '@mui/material/styles/createTheme';
|
import type { Theme } from '@mui/material/styles/createTheme';
|
||||||
import { useUiFlag } from './useUiFlag';
|
import { useUiFlag } from './useUiFlag';
|
||||||
|
import type { Variant } from 'utils/variants';
|
||||||
|
|
||||||
interface IUseThemeModeOutput {
|
interface IUseThemeModeOutput {
|
||||||
resolveTheme: () => Theme;
|
resolveTheme: () => Theme;
|
||||||
@ -19,12 +20,22 @@ export const useThemeMode = (): IUseThemeModeOutput => {
|
|||||||
const key = 'unleash-theme';
|
const key = 'unleash-theme';
|
||||||
const uiGlobalFontSizeEnabled = useUiFlag('uiGlobalFontSize');
|
const uiGlobalFontSizeEnabled = useUiFlag('uiGlobalFontSize');
|
||||||
|
|
||||||
const resolveTheme = () => {
|
let useNewTheme = false;
|
||||||
if (themeMode === 'light') {
|
if (typeof uiGlobalFontSizeEnabled === 'boolean') {
|
||||||
return uiGlobalFontSizeEnabled ? lightTheme : legacyLightTheme;
|
useNewTheme = uiGlobalFontSizeEnabled;
|
||||||
|
} else if (
|
||||||
|
typeof uiGlobalFontSizeEnabled === 'object' &&
|
||||||
|
'name' in uiGlobalFontSizeEnabled
|
||||||
|
) {
|
||||||
|
useNewTheme = (uiGlobalFontSizeEnabled as Variant).name !== 'disabled';
|
||||||
}
|
}
|
||||||
|
|
||||||
return uiGlobalFontSizeEnabled ? darkTheme : legacyDarkTheme;
|
const resolveTheme = () => {
|
||||||
|
if (themeMode === 'light') {
|
||||||
|
return useNewTheme ? lightTheme : legacyLightTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
return useNewTheme ? darkTheme : legacyDarkTheme;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSetThemeMode = () => {
|
const onSetThemeMode = () => {
|
||||||
|
@ -39,7 +39,12 @@ const theme = {
|
|||||||
fontWeightBold: '700',
|
fontWeightBold: '700',
|
||||||
fontWeightMedium: '700',
|
fontWeightMedium: '700',
|
||||||
allVariants: { lineHeight: 1.4 },
|
allVariants: { lineHeight: 1.4 },
|
||||||
button: { lineHeight: 1.75, fontSize: '16px' },
|
button: {
|
||||||
|
lineHeight: 1.75,
|
||||||
|
'&&&': {
|
||||||
|
fontSize: '16px',
|
||||||
|
},
|
||||||
|
},
|
||||||
h1: {
|
h1: {
|
||||||
fontSize: '1.5rem',
|
fontSize: '1.5rem',
|
||||||
lineHeight: 1.875,
|
lineHeight: 1.875,
|
||||||
|
@ -31,7 +31,12 @@ export const theme = {
|
|||||||
fontWeightBold: '700',
|
fontWeightBold: '700',
|
||||||
fontWeightMedium: '700',
|
fontWeightMedium: '700',
|
||||||
allVariants: { lineHeight: 1.4 },
|
allVariants: { lineHeight: 1.4 },
|
||||||
button: { lineHeight: 1.75, fontSize: '16px' },
|
button: {
|
||||||
|
lineHeight: 1.75,
|
||||||
|
'&&&': {
|
||||||
|
fontSize: '16px',
|
||||||
|
},
|
||||||
|
},
|
||||||
h1: {
|
h1: {
|
||||||
fontSize: '1.5rem',
|
fontSize: '1.5rem',
|
||||||
lineHeight: 1.875,
|
lineHeight: 1.875,
|
||||||
|
Loading…
Reference in New Issue
Block a user