From 68635351df8f17eb6401b94f43b9b7672eb9684e Mon Sep 17 00:00:00 2001 From: Ganesh Somasundaram Date: Wed, 31 May 2023 16:45:15 -0400 Subject: [PATCH] fix: use odyssey tokens inside mui components style override --- .../src/theme/OdysseyTheme.ts | 25 - .../src/theme/components.tsx | 3450 +++++++++-------- packages/odyssey-react-mui/src/theme/index.ts | 2 +- packages/odyssey-react-mui/src/theme/temp.ts | 19 - packages/odyssey-react-mui/src/theme/theme.ts | 6 +- .../odyssey-react-mui/src/theme/useTheme.ts | 18 - .../src/contributing/CustomTheme.stories.tsx | 3 +- .../src/guidelines/CustomTheming.stories.mdx | 95 +- 8 files changed, 1790 insertions(+), 1828 deletions(-) delete mode 100644 packages/odyssey-react-mui/src/theme/OdysseyTheme.ts delete mode 100644 packages/odyssey-react-mui/src/theme/temp.ts delete mode 100644 packages/odyssey-react-mui/src/theme/useTheme.ts diff --git a/packages/odyssey-react-mui/src/theme/OdysseyTheme.ts b/packages/odyssey-react-mui/src/theme/OdysseyTheme.ts deleted file mode 100644 index 6aae8f9a85..0000000000 --- a/packages/odyssey-react-mui/src/theme/OdysseyTheme.ts +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved. - * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") - * - * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * - * See the License for the specific language governing permissions and limitations under the License. - */ - -import { Theme } from "@mui/material/styles"; -import { Temp } from "./temp"; - -declare module "@mui/material/styles" { - interface ThemeOptions { - temp?: Temp; - } -} - -export interface OdysseyTheme extends Theme { - /** @deprecated `temp` is only for testing. It will be removed in a future version of Odyssey. */ - temp?: Temp; -} diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index ca67e19405..044efe142e 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -40,1359 +40,1323 @@ import { InformationCircleFilledIcon, SubtractIcon, } from "../iconDictionary"; - -export const components: ThemeOptions["components"] = { - MuiAlert: { - defaultProps: { - iconMapping: { - error: , - info: , - success: , - warning: , +import { DesignTokensOverride } from "."; + +export const components = ( + odysseyTokens: DesignTokensOverride +): ThemeOptions["components"] => { + return { + MuiAlert: { + defaultProps: { + iconMapping: { + error: , + info: , + success: , + warning: , + }, }, - }, - styleOverrides: { - root: ({ ownerState, theme }) => ({ - padding: theme.spacing(4), - gap: theme.spacing(4), - color: theme.palette.text.primary, - ...(ownerState.severity && { - backgroundColor: theme.palette[ownerState.severity].lighter, - borderColor: theme.palette[ownerState.severity].light, - }), - ...(ownerState.variant === "banner" && { - position: "relative", - justifyContent: "center", - alignItems: "center", - borderWidth: 0, - borderRadius: 0, - }), - ...(ownerState.variant === "infobox" && { - borderStyle: theme.mixins.borderStyle, - borderWidth: theme.mixins.borderWidth, - borderRadius: theme.mixins.borderRadius, - "&:not(:last-child)": { - marginBottom: theme.spacing(4), - }, + styleOverrides: { + root: ({ ownerState, theme }) => ({ + padding: theme.spacing(4), + gap: theme.spacing(4), + color: theme.palette.text.primary, + ...(ownerState.severity && { + backgroundColor: theme.palette[ownerState.severity].lighter, + borderColor: theme.palette[ownerState.severity].light, + }), + ...(ownerState.variant === "banner" && { + position: "relative", + justifyContent: "center", + alignItems: "center", + borderWidth: 0, + borderRadius: 0, + }), + ...(ownerState.variant === "infobox" && { + borderStyle: theme.mixins.borderStyle, + borderWidth: theme.mixins.borderWidth, + borderRadius: odysseyTokens.BorderRadiusMain, + "&:not(:last-child)": { + marginBottom: theme.spacing(4), + }, + }), + ...(ownerState.variant === "toast" && { + maxWidth: theme.mixins.maxWidth, + borderStyle: theme.mixins.borderStyle, + borderWidth: theme.mixins.borderWidth, + borderRadius: theme.mixins.borderRadius, + position: "relative", + alignItems: "center", + }), }), - ...(ownerState.variant === "toast" && { - maxWidth: theme.mixins.maxWidth, - borderStyle: theme.mixins.borderStyle, - borderWidth: theme.mixins.borderWidth, - borderRadius: theme.mixins.borderRadius, - position: "relative", - alignItems: "center", + action: ({ ownerState, theme }) => ({ + ...(ownerState.variant === "banner" && { + padding: 0, + marginInlineEnd: 0, + top: "50%", + right: theme.spacing(4), + position: "absolute", + transform: "translateY(-50%)", + }), + ...(ownerState.variant === "toast" && { + padding: 0, + marginInlineStart: 0, + marginInlineEnd: 0, + }), }), - }), - action: ({ ownerState, theme }) => ({ - ...(ownerState.variant === "banner" && { - padding: 0, + icon: ({ ownerState, theme }) => ({ marginInlineEnd: 0, - top: "50%", - right: theme.spacing(4), - position: "absolute", - transform: "translateY(-50%)", - }), - ...(ownerState.variant === "toast" && { padding: 0, - marginInlineStart: 0, - marginInlineEnd: 0, - }), - }), - icon: ({ ownerState, theme }) => ({ - marginInlineEnd: 0, - padding: 0, - fontSize: "inherit", - opacity: 1, - ...(ownerState.severity && { - color: theme.palette[ownerState.severity].main, - }), - ...(ownerState.severity === "warning" && { - color: theme.palette[ownerState.severity].dark, - }), + fontSize: "inherit", + opacity: 1, + ...(ownerState.severity && { + color: theme.palette[ownerState.severity].main, + }), + ...(ownerState.severity === "warning" && { + color: theme.palette[ownerState.severity].dark, + }), - [`& .${svgIconClasses.root}`]: { - fontSize: "1.429rem", - }, - }), - message: ({ ownerState, theme }) => ({ - padding: 0, - lineHeight: theme.typography.body1.lineHeight, - overflow: "visible", - ...(ownerState.variant === "banner" && { - display: "flex", - justifyContent: "space-between", - gap: theme.spacing(4), + [`& .${svgIconClasses.root}`]: { + fontSize: "1.429rem", + }, }), - ...(ownerState.variant === "toast" && { - flexGrow: 1, + message: ({ ownerState, theme }) => ({ + padding: 0, + lineHeight: theme.typography.body1.lineHeight, + overflow: "visible", + ...(ownerState.variant === "banner" && { + display: "flex", + justifyContent: "space-between", + gap: theme.spacing(4), + }), + ...(ownerState.variant === "toast" && { + flexGrow: 1, + }), }), - }), - }, - }, - MuiAlertTitle: { - styleOverrides: { - root: ({ theme }) => ({ - marginTop: 0, - marginBottom: theme.spacing(1), - lineHeight: theme.typography.h6.lineHeight, - fontSize: theme.typography.h6.fontSize, - fontWeight: theme.typography.fontWeightBold, - - "&:last-child": { - marginBlockEnd: 0, - }, - }), - }, - }, - MuiAutocomplete: { - defaultProps: { - autoHighlight: true, - autoSelect: false, - blurOnSelect: false, - clearIcon: , - clearOnEscape: true, - disableClearable: false, - disabledItemsFocusable: false, - disableListWrap: false, - disablePortal: false, - filterSelectedOptions: false, - fullWidth: false, - handleHomeEndKeys: true, - includeInputInList: true, - limitTags: -1, - openOnFocus: false, - popupIcon: , - selectOnFocus: true, + }, }, - styleOverrides: { - clearIndicator: ({ theme }) => ({ - marginRight: "unset", - padding: theme.spacing(1), - }), - endAdornment: ({ theme, ownerState }) => ({ - display: "flex", - gap: theme.spacing(1), - top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`, - right: theme.spacing(2), - maxHeight: "unset", - alignItems: "center", - whiteSpace: "nowrap", - color: theme.palette.action.active, - - ...(ownerState.disabled === true && { - display: "none", - }), + MuiAlertTitle: { + styleOverrides: { + root: ({ theme }) => ({ + marginTop: 0, + marginBottom: theme.spacing(1), + lineHeight: theme.typography.h6.lineHeight, + fontSize: theme.typography.h6.fontSize, + fontWeight: theme.typography.fontWeightBold, - ...(ownerState.readOnly === true && { - display: "none", - }), - }), - loading: ({ theme }) => ({ - paddingBlock: theme.spacing(3), - paddingInline: theme.spacing(4), - }), - popupIndicator: ({ theme }) => ({ - padding: theme.spacing(1), - marginRight: "unset", - }), - inputRoot: ({ theme, ownerState }) => ({ - ...(ownerState.readOnly === true && { - backgroundColor: theme.palette.grey[50], - - [`&:not(:hover)`]: { - borderColor: "transparent", + "&:last-child": { + marginBlockEnd: 0, }, }), - }), + }, }, - }, - MuiBackdrop: { - styleOverrides: { - root: ({ ownerState }) => ({ - backgroundColor: "rgba(29,29,33,0.75)", - - ...(ownerState.invisible === true && { - backgroundColor: "transparent", + MuiAutocomplete: { + defaultProps: { + autoHighlight: true, + autoSelect: false, + blurOnSelect: false, + clearIcon: , + clearOnEscape: true, + disableClearable: false, + disabledItemsFocusable: false, + disableListWrap: false, + disablePortal: false, + filterSelectedOptions: false, + fullWidth: false, + handleHomeEndKeys: true, + includeInputInList: true, + limitTags: -1, + openOnFocus: false, + popupIcon: , + selectOnFocus: true, + }, + styleOverrides: { + clearIndicator: ({ theme }) => ({ + marginRight: "unset", + padding: theme.spacing(1), }), - }), - }, - }, - MuiButton: { - defaultProps: { - variant: "primary", - disableElevation: true, - }, - variants: [ - { - props: { variant: "primary" }, - style: ({ theme }) => ({ - fontWeight: 600, - color: theme.palette.common.white, - borderColor: "transparent", - backgroundColor: theme.palette.primary.main, + endAdornment: ({ theme, ownerState }) => ({ + display: "flex", + gap: theme.spacing(1), + top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`, + right: theme.spacing(2), + maxHeight: "unset", + alignItems: "center", + whiteSpace: "nowrap", + color: theme.palette.action.active, - "&:hover, &:focus-visible": { - backgroundColor: theme.palette.primary.dark, - }, + ...(ownerState.disabled === true && { + display: "none", + }), - "&:active": { - backgroundColor: theme.palette.primary.main, - }, + ...(ownerState.readOnly === true && { + display: "none", + }), + }), + loading: ({ theme }) => ({ + paddingBlock: theme.spacing(3), + paddingInline: theme.spacing(4), + }), + popupIndicator: ({ theme }) => ({ + padding: theme.spacing(1), + marginRight: "unset", + }), + inputRoot: ({ theme, ownerState }) => ({ + ...(ownerState.readOnly === true && { + backgroundColor: theme.palette.grey[50], - "&:disabled": { - color: theme.palette.common.white, - backgroundColor: theme.palette.primary.light, - pointerEvents: "initial", - }, + [`&:not(:hover)`]: { + borderColor: "transparent", + }, + }), }), }, - { - props: { variant: "secondary" }, - style: ({ theme }) => ({ - backgroundColor: theme.palette.grey[50], - borderColor: theme.palette.grey[200], - color: theme.palette.text.primary, - "&:hover, &:focus-visible": { - backgroundColor: theme.palette.primary.lighter, - borderColor: theme.palette.primary.light, - color: theme.palette.primary.main, - }, - - "&:active": { - borderColor: theme.palette.primary.main, - }, + }, + MuiBackdrop: { + styleOverrides: { + root: ({ ownerState }) => ({ + backgroundColor: "rgba(29,29,33,0.75)", - "&:disabled": { - borderColor: theme.palette.grey[100], - backgroundColor: theme.palette.grey[100], - color: theme.palette.grey[500], - }, + ...(ownerState.invisible === true && { + backgroundColor: "transparent", + }), }), }, - { - props: { variant: "danger" }, - style: ({ theme }) => ({ - backgroundColor: theme.palette.error.main, - color: theme.palette.common.white, - borderColor: "transparent", + }, + MuiButton: { + defaultProps: { + variant: "primary", + disableElevation: true, + }, + variants: [ + { + props: { variant: "primary" }, + style: ({ theme }) => ({ + fontWeight: 600, + color: theme.palette.common.white, + borderColor: "transparent", + backgroundColor: theme.palette.primary.main, - "&:hover": { - backgroundColor: theme.palette.error.dark, - }, + "&:hover, &:focus-visible": { + backgroundColor: theme.palette.primary.dark, + }, - "&:focus-visible": { - boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`, - backgroundColor: theme.palette.error.dark, - }, + "&:active": { + backgroundColor: theme.palette.primary.main, + }, - "&:active": { - backgroundColor: theme.palette.error.main, - }, + "&:disabled": { + color: theme.palette.common.white, + backgroundColor: theme.palette.primary.light, + pointerEvents: "initial", + }, + }), + }, + { + props: { variant: "secondary" }, + style: ({ theme }) => ({ + backgroundColor: theme.palette.grey[50], + borderColor: theme.palette.grey[200], + color: theme.palette.text.primary, + "&:hover, &:focus-visible": { + backgroundColor: theme.palette.primary.lighter, + borderColor: theme.palette.primary.light, + color: theme.palette.primary.main, + }, - "&:disabled": { - color: theme.palette.common.white, - backgroundColor: theme.palette.error.light, - }, - }), - }, - { - props: { variant: "floating" }, - style: ({ theme }) => ({ - backgroundColor: "transparent", - color: theme.palette.text.primary, - borderColor: "transparent", + "&:active": { + borderColor: theme.palette.primary.main, + }, - "&:hover, &:focus-visible": { - backgroundColor: "rgba(29, 29, 33, 0.1)", - borderColor: "transparent", - }, - "&:active": { - backgroundColor: "rgba(29, 29, 33, 0.2)", + "&:disabled": { + borderColor: theme.palette.grey[100], + backgroundColor: theme.palette.grey[100], + color: theme.palette.grey[500], + }, + }), + }, + { + props: { variant: "danger" }, + style: ({ theme }) => ({ + backgroundColor: theme.palette.error.main, + color: theme.palette.common.white, borderColor: "transparent", - }, - "&:disabled": { + + "&:hover": { + backgroundColor: theme.palette.error.dark, + }, + + "&:focus-visible": { + boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`, + backgroundColor: theme.palette.error.dark, + }, + + "&:active": { + backgroundColor: theme.palette.error.main, + }, + + "&:disabled": { + color: theme.palette.common.white, + backgroundColor: theme.palette.error.light, + }, + }), + }, + { + props: { variant: "floating" }, + style: ({ theme }) => ({ backgroundColor: "transparent", - color: theme.palette.text.secondary, + color: theme.palette.text.primary, borderColor: "transparent", + + "&:hover, &:focus-visible": { + backgroundColor: "rgba(29, 29, 33, 0.1)", + borderColor: "transparent", + }, + "&:active": { + backgroundColor: "rgba(29, 29, 33, 0.2)", + borderColor: "transparent", + }, + "&:disabled": { + backgroundColor: "transparent", + color: theme.palette.text.secondary, + borderColor: "transparent", + }, + }), + }, + { + props: { size: "small" }, + style: ({ theme }) => ({ + paddingBlock: `calc(${theme.spacing(2)} - 1px)`, + paddingInline: `calc(${theme.spacing(2)} - 1px)`, + fontSize: "1rem", + }), + }, + { + props: { size: "large" }, + style: ({ theme }) => ({ + paddingBlock: `calc(${theme.spacing(4)} - 1px)`, + paddingInline: `calc(${theme.spacing(4)} - 1px)`, + }), + }, + { + props: { fullWidth: true }, + style: ({ theme }) => ({ + display: "block", + width: "100%", + marginBlock: "0", + marginInline: "0", + + "&:not(:last-child)": { + marginBlockEnd: theme.spacing(4), + }, + }), + }, + { + // icon only + props: { children: "" }, + style: { + minWidth: "auto", + + [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: { + margin: "0", + }, }, - }), - }, - { - props: { size: "small" }, - style: ({ theme }) => ({ - paddingBlock: `calc(${theme.spacing(2)} - 1px)`, - paddingInline: `calc(${theme.spacing(2)} - 1px)`, - fontSize: "1rem", - }), - }, - { - props: { size: "large" }, - style: ({ theme }) => ({ - paddingBlock: `calc(${theme.spacing(4)} - 1px)`, - paddingInline: `calc(${theme.spacing(4)} - 1px)`, - }), - }, - { - props: { fullWidth: true }, - style: ({ theme }) => ({ - display: "block", - width: "100%", + }, + ], + styleOverrides: { + root: ({ theme }) => ({ + fontWeight: 600, + minWidth: "unset", + padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`, + display: "inline-flex", + position: "relative", marginBlock: "0", marginInline: "0", + transitionProperty: + "color, background-color, border-color, box-shadow", + transitionDuration: "100ms", + transitionTimingFunction: "linear", + borderWidth: theme.mixins.borderWidth, + borderStyle: theme.mixins.borderStyle, + borderRadius: theme.mixins.borderRadius, + fontSize: theme.typography.body1.fontSize, + lineHeight: theme.typography.ui.lineHeight, + whiteSpace: "nowrap", - "&:not(:last-child)": { - marginBlockEnd: theme.spacing(4), + ".MuiButton-root + &": { + marginInlineStart: theme.spacing(2), }, - }), - }, - { - // icon only - props: { children: "" }, - style: { - minWidth: "auto", - [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: { - margin: "0", + "&:focus-visible": { + boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`, + outline: "2px solid transparent", + outlineOffset: "1px", }, - }, - }, - ], - styleOverrides: { - root: ({ theme }) => ({ - fontWeight: 600, - minWidth: "unset", - padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`, - display: "inline-flex", - position: "relative", - marginBlock: "0", - marginInline: "0", - transitionProperty: "color, background-color, border-color, box-shadow", - transitionDuration: "100ms", - transitionTimingFunction: "linear", - borderWidth: theme.mixins.borderWidth, - borderStyle: theme.mixins.borderStyle, - borderRadius: theme.mixins.borderRadius, - fontSize: theme.typography.body1.fontSize, - lineHeight: theme.typography.ui.lineHeight, - whiteSpace: "nowrap", - - ".MuiButton-root + &": { - marginInlineStart: theme.spacing(2), - }, - "&:focus-visible": { - boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`, - outline: "2px solid transparent", - outlineOffset: "1px", - }, - - "&:disabled": { - cursor: "not-allowed", - pointerEvents: "initial", - }, + "&:disabled": { + cursor: "not-allowed", + pointerEvents: "initial", + }, - "&:disabled:active": { - pointerEvents: "none", - }, + "&:disabled:active": { + pointerEvents: "none", + }, - [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: { - "& > *:nth-of-type(1)": { - fontSize: `${theme.typography.ui.lineHeight}em`, + [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: { + "& > *:nth-of-type(1)": { + fontSize: `${theme.typography.ui.lineHeight}em`, + }, }, - }, - }), + }), - endIcon: ({ theme, ownerState }) => ({ - display: "inline-flex", - margin: 0, - marginInlineStart: theme.spacing(2), + endIcon: ({ theme, ownerState }) => ({ + display: "inline-flex", + margin: 0, + marginInlineStart: theme.spacing(2), - ...(ownerState.children === undefined && { - marginInlineStart: 0, + ...(ownerState.children === undefined && { + marginInlineStart: 0, + }), }), - }), - startIcon: ({ theme, ownerState }) => ({ - display: "inline-flex", - margin: 0, - marginInlineEnd: theme.spacing(2), + startIcon: ({ theme, ownerState }) => ({ + display: "inline-flex", + margin: 0, + marginInlineEnd: theme.spacing(2), - ...(ownerState.children === undefined && { - marginInlineEnd: 0, + ...(ownerState.children === undefined && { + marginInlineEnd: 0, + }), }), - }), - }, - }, - MuiButtonBase: { - defaultProps: { - disableRipple: true, + }, }, - }, - MuiCheckbox: { - defaultProps: { - size: "small", - icon: <>, - checkedIcon: , - indeterminateIcon: , + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, }, - styleOverrides: { - root: ({ theme }) => ({ - width: `${theme.typography.ui.lineHeight}em`, - height: `${theme.typography.ui.lineHeight}em`, - borderRadius: theme.mixins.borderRadius, - borderWidth: theme.mixins.borderWidth, - borderStyle: theme.mixins.borderStyle, - borderColor: theme.palette.grey[500], - padding: 0, - boxShadow: `0 0 0 0 transparent`, - transition: theme.transitions.create( - ["border-color", "background-color", "box-shadow"], - { - duration: theme.transitions.duration.short, - } - ), - - ".MuiSvgIcon-root": { - color: theme.palette.common.white, - transition: theme.transitions.create(["color"], { - duration: theme.transitions.duration.short, - }), - }, - - "&.Mui-checked": { - backgroundColor: theme.palette.primary.main, - borderColor: theme.palette.primary.main, + MuiCheckbox: { + defaultProps: { + size: "small", + icon: <>, + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + width: `${theme.typography.ui.lineHeight}em`, + height: `${theme.typography.ui.lineHeight}em`, + borderRadius: theme.mixins.borderRadius, + borderWidth: theme.mixins.borderWidth, + borderStyle: theme.mixins.borderStyle, + borderColor: theme.palette.grey[500], + padding: 0, + boxShadow: `0 0 0 0 transparent`, + transition: theme.transitions.create( + ["border-color", "background-color", "box-shadow"], + { + duration: theme.transitions.duration.short, + } + ), - ".MuiFormControlLabel-root:hover > &": { - backgroundColor: theme.palette.primary.dark, - borderColor: theme.palette.primary.dark, + ".MuiSvgIcon-root": { + color: theme.palette.common.white, + transition: theme.transitions.create(["color"], { + duration: theme.transitions.duration.short, + }), }, - }, - - ".MuiFormControlLabel-root:hover > &": { - backgroundColor: "transparent", - borderColor: theme.palette.grey[900], - }, - ".Mui-error:not(.Mui-valid):hover > &": { - borderColor: theme.palette.error.dark, "&.Mui-checked": { - backgroundColor: theme.palette.error.dark, - borderColor: theme.palette.error.dark, - }, - }, - ".Mui-error:not(.Mui-valid) > &": { - borderColor: theme.palette.error.main, + backgroundColor: theme.palette.primary.main, + borderColor: theme.palette.primary.main, - "&.Mui-checked": { - backgroundColor: theme.palette.error.main, - borderColor: theme.palette.error.main, + ".MuiFormControlLabel-root:hover > &": { + backgroundColor: theme.palette.primary.dark, + borderColor: theme.palette.primary.dark, + }, }, - "&.Mui-focusVisible": { - boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`, + ".MuiFormControlLabel-root:hover > &": { + backgroundColor: "transparent", + borderColor: theme.palette.grey[900], }, - }, - "&.Mui-focusVisible": { - borderColor: theme.palette.grey[900], - boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`, - outline: "2px solid transparent", - outlineOffset: "1px", - }, - "&.Mui-disabled": { - backgroundColor: theme.palette.grey[50], - borderColor: theme.palette.grey[300], + ".Mui-error:not(.Mui-valid):hover > &": { + borderColor: theme.palette.error.dark, + "&.Mui-checked": { + backgroundColor: theme.palette.error.dark, + borderColor: theme.palette.error.dark, + }, + }, ".Mui-error:not(.Mui-valid) > &": { + borderColor: theme.palette.error.main, + + "&.Mui-checked": { + backgroundColor: theme.palette.error.main, + borderColor: theme.palette.error.main, + }, + + "&.Mui-focusVisible": { + boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`, + }, + }, + "&.Mui-focusVisible": { + borderColor: theme.palette.grey[900], + boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`, + outline: "2px solid transparent", + outlineOffset: "1px", + }, + "&.Mui-disabled": { backgroundColor: theme.palette.grey[50], borderColor: theme.palette.grey[300], - }, - ".MuiSvgIcon-root": { - color: theme.palette.common.black, + ".Mui-error:not(.Mui-valid) > &": { + backgroundColor: theme.palette.grey[50], + borderColor: theme.palette.grey[300], + }, + + ".MuiSvgIcon-root": { + color: theme.palette.common.black, + }, }, - }, - }), - }, - }, - MuiChip: { - defaultProps: { - deleteIcon: , - }, - styleOverrides: { - root: ({ theme, ownerState }) => ({ - height: "auto", - paddingBlock: theme.spacing(2), - paddingInline: theme.spacing(3), - fontSize: theme.typography.body1.fontSize, - lineHeight: theme.typography.ui.lineHeight, - borderRadius: "1.5em", - backgroundColor: theme.palette.grey[100], - - ...(ownerState.onDelete && { - paddingInlineEnd: theme.spacing(2), }), + }, + }, + MuiChip: { + defaultProps: { + deleteIcon: , + }, + styleOverrides: { + root: ({ theme, ownerState }) => ({ + height: "auto", + paddingBlock: theme.spacing(2), + paddingInline: theme.spacing(3), + fontSize: theme.typography.body1.fontSize, + lineHeight: theme.typography.ui.lineHeight, + borderRadius: "1.5em", + backgroundColor: theme.palette.grey[100], - [`&.${chipClasses.disabled}`]: { - opacity: 1, - pointerEvents: "none", - backgroundColor: theme.palette.grey[50], - color: theme.palette.text.secondary, - }, + ...(ownerState.onDelete && { + paddingInlineEnd: theme.spacing(2), + }), - ...(ownerState.clickable && { - "&:hover": { - backgroundColor: theme.palette.grey[200], - }, - [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.palette.grey[200], - outlineColor: theme.palette.primary.main, - outlineOffset: "2px", - outlineStyle: "solid", - outlineWidth: "2px", - }, - "&:active": { - boxShadow: "none", - backgroundColor: theme.palette.grey[300], + [`&.${chipClasses.disabled}`]: { + opacity: 1, + pointerEvents: "none", + backgroundColor: theme.palette.grey[50], + color: theme.palette.text.secondary, }, - }), - ...(ownerState.variant === "status" && { - paddingBlock: 0, - paddingInline: 0, - borderRadius: 0, - backgroundColor: "transparent", - color: theme.palette.text.primary, + ...(ownerState.clickable && { + "&:hover": { + backgroundColor: theme.palette.grey[200], + }, + [`&.${chipClasses.focusVisible}`]: { + backgroundColor: theme.palette.grey[200], + outlineColor: theme.palette.primary.main, + outlineOffset: "2px", + outlineStyle: "solid", + outlineWidth: "2px", + }, + "&:active": { + boxShadow: "none", + backgroundColor: theme.palette.grey[300], + }, + }), - "&::before": { - content: "''", - width: ".57em", - height: ".57em", - marginInlineEnd: theme.spacing(2), - borderRadius: "100%", - backgroundColor: theme.palette.text.secondary, - }, + ...(ownerState.variant === "status" && { + paddingBlock: 0, + paddingInline: 0, + borderRadius: 0, + backgroundColor: "transparent", + color: theme.palette.text.primary, - [`&.${chipClasses.colorError}`]: { "&::before": { - backgroundColor: theme.palette.error.main, + content: "''", + width: ".57em", + height: ".57em", + marginInlineEnd: theme.spacing(2), + borderRadius: "100%", + backgroundColor: theme.palette.text.secondary, }, - }, - [`&.${chipClasses.colorSuccess}`]: { - "&::before": { - backgroundColor: theme.palette.success.main, + [`&.${chipClasses.colorError}`]: { + "&::before": { + backgroundColor: theme.palette.error.main, + }, }, - }, - [`&.${chipClasses.colorWarning}`]: { - "&::before": { - backgroundColor: theme.palette.warning.main, + [`&.${chipClasses.colorSuccess}`]: { + "&::before": { + backgroundColor: theme.palette.success.main, + }, }, + + [`&.${chipClasses.colorWarning}`]: { + "&::before": { + backgroundColor: theme.palette.warning.main, + }, + }, + }), + + [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: { + backgroundColor: theme.palette.grey[200], }, }), - [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: { - backgroundColor: theme.palette.grey[200], + label: { + padding: 0, }, - }), - - label: { - padding: 0, - }, - deleteIcon: ({ theme }) => ({ - WebkitTapHighlightColor: "transparent", - color: theme.palette.text.secondary, - fontSize: "1em", - cursor: "pointer", - margin: "0", - marginInlineStart: theme.spacing(2), + deleteIcon: ({ theme }) => ({ + WebkitTapHighlightColor: "transparent", + color: theme.palette.text.secondary, + fontSize: "1em", + cursor: "pointer", + margin: "0", + marginInlineStart: theme.spacing(2), - "&:hover": { - color: theme.palette.text.primary, - }, + "&:hover": { + color: theme.palette.text.primary, + }, - [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: { - display: "none", - }, - }), - }, - }, - MuiCircularProgress: { - defaultProps: { - // TODO: defaultProps cannot take a theme object; matches theme.typography.ui.lineHeight - size: "1.14285714rem", - thickness: 8, - color: "primary", - disableShrink: false, - variant: "indeterminate", + [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: { + display: "none", + }, + }), + }, }, - styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...(ownerState.color !== "inherit" && { - color: theme.palette.primary.dark, + MuiCircularProgress: { + defaultProps: { + // TODO: defaultProps cannot take a theme object; matches theme.typography.ui.lineHeight + size: "1.14285714rem", + thickness: 8, + color: "primary", + disableShrink: false, + variant: "indeterminate", + }, + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...(ownerState.color !== "inherit" && { + color: theme.palette.primary.dark, + }), }), - }), - circle: ({ ownerState }) => ({ - ...(ownerState.variant === "indeterminate" && { - strokeDasharray: "160%, 360%", + circle: ({ ownerState }) => ({ + ...(ownerState.variant === "indeterminate" && { + strokeDasharray: "160%, 360%", + }), }), - }), + }, }, - }, - MuiCssBaseline: { - styleOverrides: (themeParam) => ` + MuiCssBaseline: { + styleOverrides: (themeParam) => ` html { font-size: calc((${themeParam.typography.fontSize} / 16) * 100%); } `, - }, - MuiScopedCssBaseline: { - styleOverrides: { - root: ({ theme }) => ({ - abbr: { - borderBottomWidth: "1px", - borderBottomStyle: "dashed", - borderBottomColor: theme.palette.primary.dark, - textDecoration: "none", - }, - - address: { - maxWidth: theme.mixins.maxWidth, - marginBlockStart: 0, - marginBlockEnd: theme.spacing(4), - marginInline: 0, - - "&:last-child": { - marginBlockEnd: 0, + }, + MuiScopedCssBaseline: { + styleOverrides: { + root: ({ theme }) => ({ + abbr: { + borderBottomWidth: "1px", + borderBottomStyle: "dashed", + borderBottomColor: theme.palette.primary.dark, + textDecoration: "none", }, - }, - blockquote: { - maxWidth: theme.mixins.maxWidth, - marginBlockStart: 0, - marginBlockEnd: theme.spacing(4), - marginInline: 0, - paddingBlock: 0, - paddingInlineStart: theme.spacing(2), - paddingInlineEnd: 0, - borderInlineStartWidth: "3px", - borderInlineStartStyle: "solid", - borderInlineStartColor: theme.palette.grey[200], + address: { + maxWidth: theme.mixins.maxWidth, + marginBlockStart: 0, + marginBlockEnd: theme.spacing(4), + marginInline: 0, - "&:last-child": { - marginBlockEnd: 0, + "&:last-child": { + marginBlockEnd: 0, + }, }, - }, - - cite: { - fontStyle: "italic", - }, - code: { - fontFamily: - "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace", - }, - - del: { - display: "inline-block", - backgroundColor: theme.palette.error.light, - - "&::before, &::after": { - clip: "rect(0 0 0 0)", - clipPath: "inset(50%)", - height: "1px", - overflow: "hidden", - position: "absolute", - whiteSpace: "nowrap", - width: "1px", + blockquote: { + maxWidth: theme.mixins.maxWidth, + marginBlockStart: 0, + marginBlockEnd: theme.spacing(4), + marginInline: 0, + paddingBlock: 0, + paddingInlineStart: theme.spacing(2), + paddingInlineEnd: 0, + borderInlineStartWidth: "3px", + borderInlineStartStyle: "solid", + borderInlineStartColor: theme.palette.grey[200], + + "&:last-child": { + marginBlockEnd: 0, + }, }, - "&::before": { - content: "attr(data-a11y-start)", + cite: { + fontStyle: "italic", }, - "&::after": { - content: "attr(data-a11y-end)", + code: { + fontFamily: + "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace", }, - }, - details: { - fontSize: theme.typography.body1.fontSize, - }, + del: { + display: "inline-block", + backgroundColor: theme.palette.error.light, - dfn: { - fontStyle: "italic", - }, + "&::before, &::after": { + clip: "rect(0 0 0 0)", + clipPath: "inset(50%)", + height: "1px", + overflow: "hidden", + position: "absolute", + whiteSpace: "nowrap", + width: "1px", + }, - dl: { - display: "grid", - gridGap: `${theme.spacing(2)} ${theme.spacing(4)}`, - gridTemplateColumns: "repeat(2, minmax(min-content, max-content))", - maxWidth: theme.mixins.maxWidth, - marginBlockStart: 0, - marginBlockEnd: theme.spacing(4), - marginInline: 0, - padding: 0, + "&::before": { + content: "attr(data-a11y-start)", + }, - "&:last-child": { - marginBlockEnd: 0, + "&::after": { + content: "attr(data-a11y-end)", + }, }, - dt: { - gridColumn: 1, - fontWeight: 600, + details: { + fontSize: theme.typography.body1.fontSize, }, - dd: { - gridColumn: 2, - fontWeight: 400, + dfn: { + fontStyle: "italic", }, - }, - em: { - fontStyle: "italic", + dl: { + display: "grid", + gridGap: `${theme.spacing(2)} ${theme.spacing(4)}`, + gridTemplateColumns: "repeat(2, minmax(min-content, max-content))", + maxWidth: theme.mixins.maxWidth, + marginBlockStart: 0, + marginBlockEnd: theme.spacing(4), + marginInline: 0, + padding: 0, - "& > em": { - textDecoration: "underline", - }, - }, + "&:last-child": { + marginBlockEnd: 0, + }, - figure: { - display: "grid", - gridGap: theme.spacing(2), - gridTemplateColumns: "minmax(min-content, max-content)", - justifyContent: "start", - justifyItems: "start", - marginBlockStart: 0, - marginBlockEnd: theme.spacing(4), - marginInline: 0, + dt: { + gridColumn: 1, + fontWeight: 600, + }, - "&:last-child": { - marginBlockEnd: 0, + dd: { + gridColumn: 2, + fontWeight: 400, + }, }, - }, - "figcaption:not([class])": { - color: theme.palette.text.secondary, - fontSize: theme.typography.body1.fontSize, - }, + em: { + fontStyle: "italic", - hr: { - marginBlock: theme.spacing(2), - marginInline: 0, - borderWidth: "1px", - borderStyle: "solid", - borderColor: theme.palette.grey[200], - }, + "& > em": { + textDecoration: "underline", + }, + }, - ins: { - display: "inline-block", - backgroundColor: theme.palette.success.light, + figure: { + display: "grid", + gridGap: theme.spacing(2), + gridTemplateColumns: "minmax(min-content, max-content)", + justifyContent: "start", + justifyItems: "start", + marginBlockStart: 0, + marginBlockEnd: theme.spacing(4), + marginInline: 0, - "&::before, &::after": { - clip: "rect(0 0 0 0)", - clipPath: "inset(50%)", - height: "1px", - overflow: "hidden", - position: "absolute", - whiteSpace: "nowrap", - width: "1px", + "&:last-child": { + marginBlockEnd: 0, + }, }, - "&::before": { - content: "attr(data-a11y-start)", + "figcaption:not([class])": { + color: theme.palette.text.secondary, + fontSize: theme.typography.body1.fontSize, }, - "&::after": { - content: "attr(data-a11y-end)", + hr: { + marginBlock: theme.spacing(2), + marginInline: 0, + borderWidth: "1px", + borderStyle: "solid", + borderColor: theme.palette.grey[200], }, - }, - kbd: { - display: "inline-block", - minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`, - borderStyle: theme.mixins.borderStyle, - borderWidth: theme.mixins.borderWidth, - borderRadius: theme.mixins.borderRadius, - borderColor: theme.palette.grey[200], - backgroundColor: theme.palette.grey[50], - padding: `calc(${theme.spacing(1)} / 2) ${theme.spacing(1)}`, - fontFamily: - "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace", - fontSize: theme.typography.subtitle1.fontSize, - fontWeight: theme.typography.fontWeightRegular, - lineHeight: theme.typography.h5.lineHeight, - boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`, - }, + ins: { + display: "inline-block", + backgroundColor: theme.palette.success.light, - mark: { - backgroundColor: theme.palette.warning.light, + "&::before, &::after": { + clip: "rect(0 0 0 0)", + clipPath: "inset(50%)", + height: "1px", + overflow: "hidden", + position: "absolute", + whiteSpace: "nowrap", + width: "1px", + }, - "&::before, &::after": { - clip: "rect(0 0 0 0)", - clipPath: "inset(50%)", - height: "1px", - overflow: "hidden", - position: "absolute", - whiteSpace: "nowrap", - width: "1px", - }, + "&::before": { + content: "attr(data-a11y-start)", + }, - "&::before": { - content: "attr(data-a11y-start)", + "&::after": { + content: "attr(data-a11y-end)", + }, }, - "&::after": { - content: "attr(data-a11y-end)", - }, - }, + kbd: { + display: "inline-block", + minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`, + borderStyle: theme.mixins.borderStyle, + borderWidth: theme.mixins.borderWidth, + borderRadius: theme.mixins.borderRadius, + borderColor: theme.palette.grey[200], + backgroundColor: theme.palette.grey[50], + padding: `calc(${theme.spacing(1)} / 2) ${theme.spacing(1)}`, + fontFamily: + "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace", + fontSize: theme.typography.subtitle1.fontSize, + fontWeight: theme.typography.fontWeightRegular, + lineHeight: theme.typography.h5.lineHeight, + boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`, + }, + + mark: { + backgroundColor: theme.palette.warning.light, + + "&::before, &::after": { + clip: "rect(0 0 0 0)", + clipPath: "inset(50%)", + height: "1px", + overflow: "hidden", + position: "absolute", + whiteSpace: "nowrap", + width: "1px", + }, - "p:not([class])": { - maxWidth: theme.mixins.maxWidth, - marginBlockStart: 0, - marginBlockEnd: theme.spacing(4), + "&::before": { + content: "attr(data-a11y-start)", + }, - "&:last-child": { - marginBlockEnd: 0, + "&::after": { + content: "attr(data-a11y-end)", + }, }, - }, - pre: { - marginInline: 0, - marginBlockStart: 0, - marginBlockEnd: theme.spacing(4), - fontFamily: - "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace", - whiteSpace: "pre-wrap", - tabSize: 2, + "p:not([class])": { + maxWidth: theme.mixins.maxWidth, + marginBlockStart: 0, + marginBlockEnd: theme.spacing(4), - "&:last-child": { - marginBlockEnd: 0, + "&:last-child": { + marginBlockEnd: 0, + }, }, - }, - "ul:not([class]), ol:not([class])": { - maxWidth: theme.mixins.maxWidth, - marginBlockStart: 0, - marginBlockEnd: theme.spacing(4), - // Unique padding to get desire appearance with "outside" position - paddingInlineStart: "2ch", + pre: { + marginInline: 0, + marginBlockStart: 0, + marginBlockEnd: theme.spacing(4), + fontFamily: + "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace", + whiteSpace: "pre-wrap", + tabSize: 2, - ol: { - listStyleType: "lower-alpha", + "&:last-child": { + marginBlockEnd: 0, + }, + }, + + "ul:not([class]), ol:not([class])": { + maxWidth: theme.mixins.maxWidth, + marginBlockStart: 0, + marginBlockEnd: theme.spacing(4), + // Unique padding to get desire appearance with "outside" position + paddingInlineStart: "2ch", ol: { - listStyleType: "lower-roman", + listStyleType: "lower-alpha", + + ol: { + listStyleType: "lower-roman", + }, }, - }, - "&:last-child": { - marginBlockEnd: 0, + "&:last-child": { + marginBlockEnd: 0, + }, }, - }, - "li:not([class])": { - marginBlockEnd: theme.spacing(2), - paddingInlineStart: theme.spacing(1), + "li:not([class])": { + marginBlockEnd: theme.spacing(2), + paddingInlineStart: theme.spacing(1), - "ul, ol": { - marginBlockStart: theme.spacing(2), - marginInlineStart: `calc(${theme.spacing(6)} - 2ch)`, + "ul, ol": { + marginBlockStart: theme.spacing(2), + marginInlineStart: `calc(${theme.spacing(6)} - 2ch)`, + }, }, - }, - q: { - quotes: `'"' '"' "'" "'"`, + q: { + quotes: `'"' '"' "'" "'"`, - "&::before": { - content: "open-quote", - }, + "&::before": { + content: "open-quote", + }, - "&::after": { - content: "close-quote", + "&::after": { + content: "close-quote", + }, }, - }, - s: { - textDecoration: "line-through", - }, + s: { + textDecoration: "line-through", + }, - samp: { - padding: "0 0.5ch", - backgroundColor: theme.palette.grey[50], - boxShadow: `0 1px 0 ${theme.palette.grey[50]}`, - fontSize: theme.typography.body1.fontSize, + samp: { + padding: "0 0.5ch", + backgroundColor: theme.palette.grey[50], + boxShadow: `0 1px 0 ${theme.palette.grey[50]}`, + fontSize: theme.typography.body1.fontSize, - kbd: { - background: theme.palette.common.white, + kbd: { + background: theme.palette.common.white, + }, }, - }, - small: { - fontSize: theme.typography.caption.fontSize, - }, + small: { + fontSize: theme.typography.caption.fontSize, + }, - sub: { - fontSize: theme.typography.caption.fontSize, - lineHeight: 1, - verticalAlign: "sub", - }, + sub: { + fontSize: theme.typography.caption.fontSize, + lineHeight: 1, + verticalAlign: "sub", + }, - summary: { - fontSize: theme.typography.body1.fontSize, - fontWeight: theme.typography.fontWeightBold, - cursor: "default", + summary: { + fontSize: theme.typography.body1.fontSize, + fontWeight: theme.typography.fontWeightBold, + cursor: "default", - "&:focus-visible": { - outlineColor: theme.palette.primary.main, - outlineOffset: "2px", - outlineStyle: "solid", - outlineWidth: "2px", + "&:focus-visible": { + outlineColor: theme.palette.primary.main, + outlineOffset: "2px", + outlineStyle: "solid", + outlineWidth: "2px", + }, }, - }, - sup: { - fontSize: theme.typography.caption.fontSize, - lineHeight: 1, - verticalAlign: "super", - }, + sup: { + fontSize: theme.typography.caption.fontSize, + lineHeight: 1, + verticalAlign: "super", + }, - var: { - fontStyle: "italic", - fontWeight: theme.typography.fontWeightBold, - }, - }), - }, - }, - MuiDialog: { - defaultProps: { - scroll: "paper", - }, - styleOverrides: { - paper: ({ theme }) => ({ - maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`, - boxShadow: "none", - filter: - "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))", - }), + var: { + fontStyle: "italic", + fontWeight: theme.typography.fontWeightBold, + }, + }), + }, }, - }, - MuiDialogActions: { - styleOverrides: { - root: ({ theme }) => ({ - paddingBlockStart: theme.spacing(4), - paddingBlockEnd: theme.spacing(6), - paddingInline: theme.spacing(6), - }), + MuiDialog: { + defaultProps: { + scroll: "paper", + }, + styleOverrides: { + paper: ({ theme }) => ({ + maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing( + 6 + )} * 2))`, + boxShadow: "none", + filter: + "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))", + }), + }, }, - }, - MuiDialogContent: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - padding: 0, - paddingBlock: theme.spacing(4), - paddingInline: theme.spacing(6), - - "&:last-child": { + MuiDialogActions: { + styleOverrides: { + root: ({ theme }) => ({ + paddingBlockStart: theme.spacing(4), paddingBlockEnd: theme.spacing(6), - }, + paddingInline: theme.spacing(6), + }), + }, + }, + MuiDialogContent: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + padding: 0, + paddingBlock: theme.spacing(4), + paddingInline: theme.spacing(6), - ...(ownerState.dividers === false && { - [`& + .${dialogActionsClasses.root}`]: { - paddingBlockStart: theme.spacing(4), + "&:last-child": { + paddingBlockEnd: theme.spacing(6), }, + + ...(ownerState.dividers === false && { + [`& + .${dialogActionsClasses.root}`]: { + paddingBlockStart: theme.spacing(4), + }, + }), }), - }), - }, - }, - MuiDialogContentText: { - defaultProps: { - color: "text.primary", + }, }, - styleOverrides: { - root: ({ theme }) => ({ - marginBlockEnd: theme.spacing(5), + MuiDialogContentText: { + defaultProps: { + color: "text.primary", + }, + styleOverrides: { + root: ({ theme }) => ({ + marginBlockEnd: theme.spacing(5), - "&:last-child": { - marginBlockEnd: "0", - }, - }), - }, - }, - MuiDialogTitle: { - defaultProps: { - component: "h1", - variant: "h5", + "&:last-child": { + marginBlockEnd: "0", + }, + }), + }, }, - styleOverrides: { - root: ({ theme }) => ({ - display: "flex", - justifyContent: "space-between", - alignItems: "center", - marginBlockEnd: 0, - padding: 0, - paddingBlockStart: theme.spacing(5), - paddingBlockEnd: theme.spacing(4), - paddingInline: theme.spacing(6), - }), + MuiDialogTitle: { + defaultProps: { + component: "h1", + variant: "h5", + }, + styleOverrides: { + root: ({ theme }) => ({ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginBlockEnd: 0, + padding: 0, + paddingBlockStart: theme.spacing(5), + paddingBlockEnd: theme.spacing(4), + paddingInline: theme.spacing(6), + }), + }, }, - }, - MuiFormControl: { - defaultProps: { - margin: "normal", + MuiFormControl: { + defaultProps: { + margin: "normal", + }, + styleOverrides: { + root: ({ ownerState, theme }) => ({ + width: "100%", + maxWidth: theme.mixins.maxWidth, + ...(ownerState.margin === "normal" && { + marginTop: 0, + marginBottom: theme.spacing(5), + "&:last-child": { + marginBottom: 0, + }, + }), + ...(ownerState.margin === "dense" && { + marginTop: 0, + marginBottom: theme.spacing(5), + "&:last-child": { + marginBottom: 0, + }, + }), + ...(ownerState.fullWidth && { + maxWidth: "100%", + }), + }), + }, }, - styleOverrides: { - root: ({ ownerState, theme }) => ({ - width: "100%", - maxWidth: theme.mixins.maxWidth, - ...(ownerState.margin === "normal" && { - marginTop: 0, - marginBottom: theme.spacing(5), - "&:last-child": { - marginBottom: 0, + MuiFormControlLabel: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + marginInlineStart: 0, + marginInlineEnd: 0, // used for row presentation of radio/checkbox + ...(ownerState.labelPlacement === "start" && { + marginInlineStart: 0, // used for row presentation of radio/checkbox + marginInlineEnd: 0, + }), + ...(ownerState.labelPlacement === "top" && { + marginInlineStart: 0, + }), + ...(ownerState.labelPlacement === "bottom" && { + marginInlineStart: 0, + }), + "&:not(:last-child)": { + marginBottom: theme.spacing(2), + }, + "&.Mui-disabled": { + pointerEvents: "none", + }, + //[`&:hover ${radioClasses.root}:not(${radioClasses.checked})`]: { + //color: theme.palette.text.primary, + //}, + "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": { + color: theme.palette.text.primary, }, + "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked": + { + color: theme.palette.primary.dark, + }, + "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root": + { + color: theme.palette.error.dark, + }, + "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked": + { + color: theme.palette.error.dark, + }, }), - ...(ownerState.margin === "dense" && { - marginTop: 0, - marginBottom: theme.spacing(5), - "&:last-child": { - marginBottom: 0, + label: ({ theme }) => ({ + "&:not(:first-child)": { + marginInlineStart: theme.spacing(2), }, }), - ...(ownerState.fullWidth && { - maxWidth: "100%", + asterisk: () => ({ + display: "none", }), - }), + }, }, - }, - MuiFormControlLabel: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - marginInlineStart: 0, - marginInlineEnd: 0, // used for row presentation of radio/checkbox - ...(ownerState.labelPlacement === "start" && { - marginInlineStart: 0, // used for row presentation of radio/checkbox - marginInlineEnd: 0, + MuiFormHelperText: { + defaultProps: { + variant: "standard", + }, + styleOverrides: { + root: ({ theme }) => ({ + fontSize: theme.typography.subtitle1.fontSize, + lineHeight: "1.33333333", + marginBlockStart: theme.spacing(2), + ".MuiFormLabel-root + &": { + marginBlockStart: `-${theme.spacing(1)}`, + color: theme.palette.text.secondary, + }, + marginBlockEnd: theme.spacing(2), + "&:last-child": { + marginBlockEnd: 0, + }, + textAlign: "start", }), - ...(ownerState.labelPlacement === "top" && { - marginInlineStart: 0, + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + lineHeight: theme.typography.ui.lineHeight, + fontSize: "1rem", + fontWeight: 600, + marginBottom: theme.spacing(2), + "&.Mui-focused, &.Mui-error, &.Mui-disabled": { + color: theme.palette.text.primary, + }, }), - ...(ownerState.labelPlacement === "bottom" && { - marginInlineStart: 0, + }, + }, + MuiIconButton: { + styleOverrides: { + edgeEnd: ({ theme }) => ({ + marginInlineEnd: theme.spacing(1), }), - "&:not(:last-child)": { - marginBottom: theme.spacing(2), - }, - "&.Mui-disabled": { - pointerEvents: "none", - }, - //[`&:hover ${radioClasses.root}:not(${radioClasses.checked})`]: { - //color: theme.palette.text.primary, - //}, - "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": { + root: ({ theme }) => ({ + padding: theme.spacing(1), + fontSize: theme.typography.body1.fontSize, + backgroundColor: "transparent", color: theme.palette.text.primary, - }, - "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked": - { - color: theme.palette.primary.dark, + borderColor: "transparent", + borderRadius: theme.mixins.borderRadius, + + "&:hover, &:focus-visible": { + backgroundColor: "rgba(29, 29, 33, 0.1)", + borderColor: "transparent", }, - "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root": - { - color: theme.palette.error.dark, + "&:focus-visible": { + outlineColor: theme.palette.primary.main, }, - "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked": - { - color: theme.palette.error.dark, + "&:active": { + backgroundColor: "rgba(29, 29, 33, 0.2)", + borderColor: "transparent", }, - }), - label: ({ theme }) => ({ - "&:not(:first-child)": { - marginInlineStart: theme.spacing(2), - }, - }), - asterisk: () => ({ - display: "none", - }), - }, - }, - MuiFormHelperText: { - defaultProps: { - variant: "standard", - }, - styleOverrides: { - root: ({ theme }) => ({ - fontSize: theme.typography.subtitle1.fontSize, - lineHeight: "1.33333333", - marginBlockStart: theme.spacing(2), - ".MuiFormLabel-root + &": { - marginBlockStart: `-${theme.spacing(1)}`, - color: theme.palette.text.secondary, - }, - marginBlockEnd: theme.spacing(2), - "&:last-child": { - marginBlockEnd: 0, - }, - textAlign: "start", - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.text.primary, - lineHeight: theme.typography.ui.lineHeight, - fontSize: "1rem", - fontWeight: 600, - marginBottom: theme.spacing(2), - "&.Mui-focused, &.Mui-error, &.Mui-disabled": { - color: theme.palette.text.primary, - }, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - edgeEnd: ({ theme }) => ({ - marginInlineEnd: theme.spacing(1), - }), - root: ({ theme }) => ({ - padding: theme.spacing(1), - fontSize: theme.typography.body1.fontSize, - backgroundColor: "transparent", - color: theme.palette.text.primary, - borderColor: "transparent", - borderRadius: theme.mixins.borderRadius, - - "&:hover, &:focus-visible": { - backgroundColor: "rgba(29, 29, 33, 0.1)", - borderColor: "transparent", - }, - "&:focus-visible": { - outlineColor: theme.palette.primary.main, - }, - "&:active": { - backgroundColor: "rgba(29, 29, 33, 0.2)", - borderColor: "transparent", - }, - "&:disabled": { - backgroundColor: "rgba(235, 235, 237, 0.6)", - color: theme.palette.text.secondary, - borderColor: "transparent", - }, - }), - }, - }, - MuiInput: { - defaultProps: { - disableUnderline: true, + "&:disabled": { + backgroundColor: "rgba(235, 235, 237, 0.6)", + color: theme.palette.text.secondary, + borderColor: "transparent", + }, + }), + }, }, - styleOverrides: { - root: { - "label + &": { - marginTop: 0, + MuiInput: { + defaultProps: { + disableUnderline: true, + }, + styleOverrides: { + root: { + "label + &": { + marginTop: 0, + }, }, }, }, - }, - MuiInputAdornment: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - display: "flex", - minWidth: "1.25em", - maxHeight: "unset", - margin: 0, - alignItems: "center", - whiteSpace: "nowrap", - color: theme.palette.action.active, - ...(ownerState.position === "start" && { - marginInlineStart: theme.spacing(2), - }), - ...(ownerState.position === "end" && { - marginInlineEnd: theme.spacing(2), - }), - ...(ownerState.disablePointerEvents === true && { - pointerEvents: "none", + MuiInputAdornment: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + display: "flex", + minWidth: "1.25em", + maxHeight: "unset", + margin: 0, + alignItems: "center", + whiteSpace: "nowrap", + color: theme.palette.action.active, + ...(ownerState.position === "start" && { + marginInlineStart: theme.spacing(2), + }), + ...(ownerState.position === "end" && { + marginInlineEnd: theme.spacing(2), + }), + ...(ownerState.disablePointerEvents === true && { + pointerEvents: "none", + }), }), - }), - }, - }, - MuiInputBase: { - defaultProps: { - minRows: 3, - required: true, + }, }, - styleOverrides: { - root: ({ ownerState, theme }) => ({ - ...theme.typography.body1, - flex: "1", - width: "auto", - color: theme.palette.text.primary, - lineHeight: theme.typography.ui.lineHeight, - borderWidth: theme.mixins.borderWidth, - borderStyle: theme.mixins.borderStyle, - borderRadius: theme.mixins.borderRadius, - borderColor: theme.palette.grey[500], - boxShadow: `0 0 0 0 transparent`, - backgroundColor: theme.palette.common.white, - transition: theme.transitions.create( - ["border-color", "background-color", "box-shadow"], - { - duration: theme.transitions.duration.short, - } - ), - - ...(ownerState.fullWidth && { - width: "100%", - }), + MuiInputBase: { + defaultProps: { + minRows: 3, + required: true, + }, + styleOverrides: { + root: ({ ownerState, theme }) => ({ + ...theme.typography.body1, + flex: "1", + width: "auto", + color: theme.palette.text.primary, + lineHeight: theme.typography.ui.lineHeight, + borderWidth: theme.mixins.borderWidth, + borderStyle: theme.mixins.borderStyle, + borderRadius: theme.mixins.borderRadius, + borderColor: theme.palette.grey[500], + boxShadow: `0 0 0 0 transparent`, + backgroundColor: theme.palette.common.white, + transition: theme.transitions.create( + ["border-color", "background-color", "box-shadow"], + { + duration: theme.transitions.duration.short, + } + ), + + ...(ownerState.fullWidth && { + width: "100%", + }), - ...(ownerState.readOnly === true && { - borderColor: "transparent", - backgroundColor: theme.palette.grey[50], - }), + ...(ownerState.readOnly === true && { + borderColor: "transparent", + backgroundColor: theme.palette.grey[50], + }), - [`&:hover`]: { - borderColor: theme.palette.grey[900], - }, + [`&:hover`]: { + borderColor: theme.palette.grey[900], + }, - [`&.${inputBaseClasses.focused}`]: { - borderColor: theme.palette.primary.main, - boxShadow: `0 0 0 1px ${theme.palette.primary.main}`, - outline: "2px solid transparent", - outlineOffset: "1px", - }, + [`&.${inputBaseClasses.focused}`]: { + borderColor: theme.palette.primary.main, + boxShadow: `0 0 0 1px ${theme.palette.primary.main}`, + outline: "2px solid transparent", + outlineOffset: "1px", + }, - [`&.${inputBaseClasses.error}`]: { - borderColor: theme.palette.error.main, - }, + [`&.${inputBaseClasses.error}`]: { + borderColor: theme.palette.error.main, + }, - [`&.${inputBaseClasses.error}:hover`]: { - borderColor: theme.palette.error.dark, - }, + [`&.${inputBaseClasses.error}:hover`]: { + borderColor: theme.palette.error.dark, + }, - [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: { - borderColor: theme.palette.error.main, - boxShadow: `0 0 0 1px ${theme.palette.error.main}`, - }, + [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: { + borderColor: theme.palette.error.main, + boxShadow: `0 0 0 1px ${theme.palette.error.main}`, + }, - [`&.${inputBaseClasses.disabled}`]: { - color: theme.palette.text.disabled, - borderColor: theme.palette.action.disabled, - pointerEvents: "auto", - backgroundColor: theme.palette.grey[50], - cursor: "not-allowed", - }, - }), - input: ({ theme }) => ({ - boxSizing: "border-box", - height: "auto", - paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`, - paddingInline: theme.spacing(3), - boxShadow: "none", - - [`.${inputBaseClasses.disabled} &`]: { - pointerEvents: "auto", - cursor: "not-allowed", - }, + [`&.${inputBaseClasses.disabled}`]: { + color: theme.palette.text.disabled, + borderColor: theme.palette.action.disabled, + pointerEvents: "auto", + backgroundColor: theme.palette.grey[50], + cursor: "not-allowed", + }, + }), + input: ({ theme }) => ({ + boxSizing: "border-box", + height: "auto", + paddingBlock: `calc(${theme.spacing(3)} - ${ + theme.mixins.borderWidth + })`, + paddingInline: theme.spacing(3), + boxShadow: "none", - [`.${inputAdornmentClasses.root} + &`]: { - paddingInlineStart: theme.spacing(2), - }, + [`.${inputBaseClasses.disabled} &`]: { + pointerEvents: "auto", + cursor: "not-allowed", + }, - [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: { - "&::placeholder": { - color: theme.palette.text.secondary, - opacity: "1 !important", + [`.${inputAdornmentClasses.root} + &`]: { + paddingInlineStart: theme.spacing(2), + }, + + [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: { + "&::placeholder": { + color: theme.palette.text.secondary, + opacity: "1 !important", + }, }, - }, - }), - }, - }, - MuiInputLabel: { - defaultProps: { - disableAnimation: true, - shrink: false, - }, - styleOverrides: { - root: ({ ownerState }) => ({ - display: "flex", - justifyContent: "space-between", - // @ts-expect-error: Incorrect typing in MUI - ...(ownerState.formControl && { - position: "initial", - transform: "none", }), - ...(ownerState.variant === "outlined" && { - pointerEvents: "initial", - transform: "none", - maxWidth: "100%", - ...(ownerState.size === "small" && { + }, + }, + MuiInputLabel: { + defaultProps: { + disableAnimation: true, + shrink: false, + }, + styleOverrides: { + root: ({ ownerState }) => ({ + display: "flex", + justifyContent: "space-between", + // @ts-expect-error: Incorrect typing in MUI + ...(ownerState.formControl && { + position: "initial", + transform: "none", + }), + ...(ownerState.variant === "outlined" && { + pointerEvents: "initial", transform: "none", + maxWidth: "100%", + ...(ownerState.size === "small" && { + transform: "none", + }), }), + "& > .MuiTypography-root": { + lineHeight: "unset", + }, }), - "& > .MuiTypography-root": { - lineHeight: "unset", - }, - }), + }, }, - }, - MuiLink: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.primary.main, - textDecoration: "underline", - cursor: "pointer", - - "&:hover": { - color: theme.palette.primary.dark, - textDecoration: "underline", - }, - - "&:focus-visible": { - outlineColor: theme.palette.primary.main, - outlineOffset: "2px", - outlineStyle: "solid", - outlineWidth: "1px", - }, - - "&:visited": { + MuiLink: { + styleOverrides: { + root: ({ theme }) => ({ color: theme.palette.primary.main, - }, - - ".Link-indicator, .Link-icon": { - display: "inline-block", - height: "1em", - lineHeight: 1, - }, - - ".Link-indicator": { - marginInlineStart: theme.spacing(2), - }, - - ".Link-icon": { - marginInlineEnd: theme.spacing(2), - }, - svg: { - fontSize: "1rem", - height: "1em", - position: "relative", - top: "-0.0625em", - verticalAlign: "middle", - width: "1em", - }, - }), - }, - variants: [ - { - props: { variant: "monochrome" }, - style: ({ theme }) => ({ - color: theme.palette.text.primary, textDecoration: "underline", + cursor: "pointer", "&:hover": { - color: theme.palette.text.secondary, + color: theme.palette.primary.dark, + textDecoration: "underline", }, "&:focus-visible": { @@ -1403,683 +1367,733 @@ export const components: ThemeOptions["components"] = { }, "&:visited": { - color: theme.palette.text.primary, + color: theme.palette.primary.main, + }, + + ".Link-indicator, .Link-icon": { + display: "inline-block", + height: "1em", + lineHeight: 1, + }, + + ".Link-indicator": { + marginInlineStart: theme.spacing(2), + }, + + ".Link-icon": { + marginInlineEnd: theme.spacing(2), + }, + svg: { + fontSize: "1rem", + height: "1em", + position: "relative", + top: "-0.0625em", + verticalAlign: "middle", + width: "1em", }, }), }, - ], - }, - MuiListItem: { - styleOverrides: { - root: { - textAlign: "start", + variants: [ + { + props: { variant: "monochrome" }, + style: ({ theme }) => ({ + color: theme.palette.text.primary, + textDecoration: "underline", + + "&:hover": { + color: theme.palette.text.secondary, + }, + + "&:focus-visible": { + outlineColor: theme.palette.primary.main, + outlineOffset: "2px", + outlineStyle: "solid", + outlineWidth: "1px", + }, + + "&:visited": { + color: theme.palette.text.primary, + }, + }), + }, + ], + }, + MuiListItem: { + styleOverrides: { + root: { + textAlign: "start", + }, }, }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - paddingBlock: theme.spacing(2), - paddingInline: theme.spacing(4), - fontSize: theme.typography.caption.fontSize, - fontWeight: theme.typography.fontWeightBold, - lineHeight: theme.typography.caption.lineHeight, - color: theme.palette.text.secondary, - textTransform: "uppercase", - }), + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + paddingBlock: theme.spacing(2), + paddingInline: theme.spacing(4), + fontSize: theme.typography.caption.fontSize, + fontWeight: theme.typography.fontWeightBold, + lineHeight: theme.typography.caption.lineHeight, + color: theme.palette.text.secondary, + textTransform: "uppercase", + }), + }, }, - }, - MuiMenuItem: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - gap: theme.spacing(2), - minHeight: "unset", - paddingBlock: theme.spacing(3), - - "&:hover": { - textDecoration: "none", - backgroundColor: theme.palette.grey[100], + MuiMenuItem: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + gap: theme.spacing(2), + minHeight: "unset", + paddingBlock: theme.spacing(3), - // Reset on touch devices, it doesn't add specificity - "@media (hover: none)": { - backgroundColor: "transparent", + "&:hover": { + textDecoration: "none", + backgroundColor: theme.palette.grey[100], + + // Reset on touch devices, it doesn't add specificity + "@media (hover: none)": { + backgroundColor: "transparent", + }, }, - }, - [`&.${menuItemClasses.root}-destructive`]: { - color: theme.palette.error.main, - }, + [`&.${menuItemClasses.root}-destructive`]: { + color: theme.palette.error.main, + }, - [`&.${menuItemClasses.selected}`]: { - backgroundColor: "transparent", - color: theme.palette.primary.main, + [`&.${menuItemClasses.selected}`]: { + backgroundColor: "transparent", + color: theme.palette.primary.main, - "&:hover": { - backgroundColor: theme.palette.primary.lighter, + "&:hover": { + backgroundColor: theme.palette.primary.lighter, - "@media (hover: none)": { - backgroundColor: `rgba(${theme.palette.primary.main} / ${theme.palette.action.selectedOpacity})`, + "@media (hover: none)": { + backgroundColor: `rgba(${theme.palette.primary.main} / ${theme.palette.action.selectedOpacity})`, + }, }, }, - }, - ...(!ownerState.disableGutters && { - paddingInline: theme.spacing(4), - }), + ...(!ownerState.disableGutters && { + paddingInline: theme.spacing(4), + }), - ...(ownerState.divider && { - borderBlockEnd: `1px solid ${theme.palette.divider}`, - }), + ...(ownerState.divider && { + borderBlockEnd: `1px solid ${theme.palette.divider}`, + }), - [`&.${menuItemClasses.disabled}`]: { - opacity: 1, - color: theme.palette.text.disabled, - }, + [`&.${menuItemClasses.disabled}`]: { + opacity: 1, + color: theme.palette.text.disabled, + }, - [`& + .${dividerClasses.root}`]: { - marginBlock: theme.spacing(1), - }, + [`& + .${dividerClasses.root}`]: { + marginBlock: theme.spacing(1), + }, - [`& .${listItemTextClasses.root}`]: { - marginBlock: 0, - }, + [`& .${listItemTextClasses.root}`]: { + marginBlock: 0, + }, - [`& .${listItemIconClasses.root}`]: { + [`& .${listItemIconClasses.root}`]: { + minWidth: "unset", + }, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { minWidth: "unset", + color: "inherit", }, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: "unset", - color: "inherit", }, }, - }, - MuiNativeSelect: { - defaultProps: { - variant: "standard", - }, - styleOverrides: { - select: { - "&:focus": { - backgroundColor: "transparent", + MuiNativeSelect: { + defaultProps: { + variant: "standard", + }, + styleOverrides: { + select: { + "&:focus": { + backgroundColor: "transparent", + }, }, + icon: ({ theme }) => ({ + insetInlineEnd: theme.spacing(3), + color: theme.palette.text.primary, + }), }, - icon: ({ theme }) => ({ - insetInlineEnd: theme.spacing(3), - color: theme.palette.text.primary, - }), - }, - }, - MuiPopover: { - styleOverrides: { - paper: ({ theme }) => ({ - marginBlockStart: theme.spacing(1), - borderWidth: theme.mixins.borderWidth, - borderStyle: theme.mixins.borderStyle, - borderColor: theme.palette.grey[200], - }), }, - }, - MuiRadio: { - defaultProps: { - size: "small", - icon: <>, - checkedIcon: <>, + MuiPopover: { + styleOverrides: { + paper: ({ theme }) => ({ + marginBlockStart: theme.spacing(1), + borderWidth: theme.mixins.borderWidth, + borderStyle: theme.mixins.borderStyle, + borderColor: theme.palette.grey[200], + }), + }, }, - styleOverrides: { - root: ({ theme }) => ({ - width: `${theme.typography.ui.lineHeight}em`, - height: `${theme.typography.ui.lineHeight}em`, - borderRadius: `${theme.typography.ui.lineHeight}em`, - borderWidth: theme.mixins.borderWidth, - borderStyle: theme.mixins.borderStyle, - borderColor: theme.palette.grey[500], - padding: 0, - boxShadow: `0 0 0 0 transparent`, - transition: theme.transitions.create( - ["border-color", "background-color", "box-shadow"], - { - duration: theme.transitions.duration.short, - } - ), - - "&::before": { - content: "''", - position: "absolute", - width: "0.5em", - height: "0.5em", - borderRadius: "50%", - backgroundColor: "transparent", - transition: theme.transitions.create(["background-color"], { - duration: theme.transitions.duration.short, - }), - }, + MuiRadio: { + defaultProps: { + size: "small", + icon: <>, + checkedIcon: <>, + }, + styleOverrides: { + root: ({ theme }) => ({ + width: `${theme.typography.ui.lineHeight}em`, + height: `${theme.typography.ui.lineHeight}em`, + borderRadius: `${theme.typography.ui.lineHeight}em`, + borderWidth: theme.mixins.borderWidth, + borderStyle: theme.mixins.borderStyle, + borderColor: theme.palette.grey[500], + padding: 0, + boxShadow: `0 0 0 0 transparent`, + transition: theme.transitions.create( + ["border-color", "background-color", "box-shadow"], + { + duration: theme.transitions.duration.short, + } + ), - ".MuiFormControlLabel-root:hover > &": { - backgroundColor: "transparent", - borderColor: theme.palette.grey[900], - }, - ".Mui-error:hover > &": { - backgroundColor: "transparent", - borderColor: theme.palette.error.dark, "&::before": { - backgroundColor: theme.palette.error.dark, + content: "''", + position: "absolute", + width: "0.5em", + height: "0.5em", + borderRadius: "50%", + backgroundColor: "transparent", + transition: theme.transitions.create(["background-color"], { + duration: theme.transitions.duration.short, + }), }, - }, - ".Mui-error > &": { - borderColor: theme.palette.error.main, + ".MuiFormControlLabel-root:hover > &": { + backgroundColor: "transparent", + borderColor: theme.palette.grey[900], + }, + ".Mui-error:hover > &": { + backgroundColor: "transparent", + borderColor: theme.palette.error.dark, + "&::before": { + backgroundColor: theme.palette.error.dark, + }, + }, + ".Mui-error > &": { + borderColor: theme.palette.error.main, + + "&.Mui-focusVisible": { + boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`, + }, + }, "&.Mui-focusVisible": { - boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`, + borderColor: theme.palette.grey[900], + boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`, + outline: "2px solid transparent", + outlineOffset: "1px", }, - }, - "&.Mui-focusVisible": { - borderColor: theme.palette.grey[900], - boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`, - outline: "2px solid transparent", - outlineOffset: "1px", - }, - "&.Mui-checked": { - position: "relative", + "&.Mui-checked": { + position: "relative", - "&::before": { - backgroundColor: theme.palette.primary.main, + "&::before": { + backgroundColor: theme.palette.primary.main, + }, + }, + ".Mui-error > &.Mui-checked::before": { + backgroundColor: theme.palette.error.main, }, - }, - ".Mui-error > &.Mui-checked::before": { - backgroundColor: theme.palette.error.main, - }, - "&.Mui-disabled": { - backgroundColor: theme.palette.grey[50], - borderColor: theme.palette.grey[300], + "&.Mui-disabled": { + backgroundColor: theme.palette.grey[50], + borderColor: theme.palette.grey[300], - "&.Mui-checked::before": { - backgroundColor: theme.palette.grey[300], + "&.Mui-checked::before": { + backgroundColor: theme.palette.grey[300], + }, }, - }, - }), - }, - }, - MuiSnackbar: { - defaultProps: { - anchorOrigin: { - vertical: "bottom", - horizontal: "right", + }), }, }, - styleOverrides: { - root: { - "&.Toast": { - position: "static", + MuiSnackbar: { + defaultProps: { + anchorOrigin: { + vertical: "bottom", + horizontal: "right", }, }, - }, - }, - MuiSelect: { - defaultProps: { - variant: "standard", - IconComponent: ChevronDownIcon, - }, - styleOverrides: { - select: ({ theme }) => ({ - paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`, - paddingInline: theme.spacing(3), - - "&:focus": { - backgroundColor: "transparent", - }, - - ".MuiBox-root": { - display: "flex", - flexWrap: "wrap", - gap: theme.spacing(1), - marginBlock: `-${theme.spacing(2)}`, - marginInline: `-${theme.spacing(2)}`, + styleOverrides: { + root: { + "&.Toast": { + position: "static", + }, }, - }), - icon: ({ theme }) => ({ - right: "unset", - insetInlineEnd: theme.spacing(3), - color: theme.palette.text.primary, - }), - }, - }, - MuiSvgIcon: { - defaultProps: { - fontSize: "inherit", - color: "inherit", + }, }, - styleOverrides: { - root: ({ theme, ownerState }) => ({ - fontSize: `${theme.typography.ui.lineHeight}rem`, + MuiSelect: { + defaultProps: { + variant: "standard", + IconComponent: ChevronDownIcon, + }, + styleOverrides: { + select: ({ theme }) => ({ + paddingBlock: `calc(${theme.spacing(3)} - ${ + theme.mixins.borderWidth + })`, + paddingInline: theme.spacing(3), - ...(ownerState.fontSize === "small" && { - fontSize: `${Number(theme.typography.ui.lineHeight) * 0.75}rem`, - }), + "&:focus": { + backgroundColor: "transparent", + }, - ...(ownerState.fontSize === "large" && { - fontSize: `${Number(theme.typography.ui.lineHeight) * 1.25}rem`, + ".MuiBox-root": { + display: "flex", + flexWrap: "wrap", + gap: theme.spacing(1), + marginBlock: `-${theme.spacing(2)}`, + marginInline: `-${theme.spacing(2)}`, + }, }), - }), - }, - }, - MuiTab: { - defaultProps: { - iconPosition: "start", - }, - styleOverrides: { - root: ({ theme, ownerState }) => ({ - maxWidth: `calc(${theme.mixins.maxWidth} / 2)`, - minWidth: "unset", - minHeight: "unset", - padding: `${theme.spacing(4)} 0`, - lineHeight: theme.typography.body1.lineHeight, - overflow: "visible", - ...(ownerState.selected == true && { + icon: ({ theme }) => ({ + right: "unset", + insetInlineEnd: theme.spacing(3), color: theme.palette.text.primary, }), - ...(ownerState.textColor === "inherit" && { - color: "inherit", - opacity: 1, - }), - ...(ownerState.wrapped && { - fontSize: theme.typography.subtitle1.fontSize, - lineHeight: theme.typography.subtitle1.lineHeight, + }, + }, + MuiSvgIcon: { + defaultProps: { + fontSize: "inherit", + color: "inherit", + }, + styleOverrides: { + root: ({ theme, ownerState }) => ({ + fontSize: `${theme.typography.ui.lineHeight}rem`, + + ...(ownerState.fontSize === "small" && { + fontSize: `${Number(theme.typography.ui.lineHeight) * 0.75}rem`, + }), + + ...(ownerState.fontSize === "large" && { + fontSize: `${Number(theme.typography.ui.lineHeight) * 1.25}rem`, + }), }), - "&:hover": { - color: theme.palette.primary.main, - }, - "&:focus-visible::before, &.Mui-focusVisible::before": { - content: "''", - position: "absolute", - top: theme.spacing(4), - right: `calc(-1 * ${theme.spacing(2)})`, - bottom: theme.spacing(4), - left: `calc(-1 * ${theme.spacing(2)})`, - borderWidth: theme.mixins.borderWidth, - borderStyle: theme.mixins.borderStyle, - borderColor: theme.palette.primary.main, - borderRadius: theme.mixins.borderRadius, - }, - "&.Mui-selected": { - color: theme.palette.text.primary, - fontWeight: theme.typography.fontWeightBold, + }, + }, + MuiTab: { + defaultProps: { + iconPosition: "start", + }, + styleOverrides: { + root: ({ theme, ownerState }) => ({ + maxWidth: `calc(${theme.mixins.maxWidth} / 2)`, + minWidth: "unset", + minHeight: "unset", + padding: `${theme.spacing(4)} 0`, + lineHeight: theme.typography.body1.lineHeight, + overflow: "visible", + ...(ownerState.selected == true && { + color: theme.palette.text.primary, + }), + ...(ownerState.textColor === "inherit" && { + color: "inherit", + opacity: 1, + }), + ...(ownerState.wrapped && { + fontSize: theme.typography.subtitle1.fontSize, + lineHeight: theme.typography.subtitle1.lineHeight, + }), "&:hover": { color: theme.palette.primary.main, }, - }, - "&.Mui-disabled": { - cursor: "not-allowed", - pointerEvents: "unset", - "&:hover": { - color: theme.palette.text.disabled, + "&:focus-visible::before, &.Mui-focusVisible::before": { + content: "''", + position: "absolute", + top: theme.spacing(4), + right: `calc(-1 * ${theme.spacing(2)})`, + bottom: theme.spacing(4), + left: `calc(-1 * ${theme.spacing(2)})`, + borderWidth: theme.mixins.borderWidth, + borderStyle: theme.mixins.borderStyle, + borderColor: theme.palette.primary.main, + borderRadius: theme.mixins.borderRadius, }, - }, - }), - }, - }, - MuiTabPanel: { - styleOverrides: { - root: { - padding: 0, + "&.Mui-selected": { + color: theme.palette.text.primary, + fontWeight: theme.typography.fontWeightBold, + "&:hover": { + color: theme.palette.primary.main, + }, + }, + "&.Mui-disabled": { + cursor: "not-allowed", + pointerEvents: "unset", + "&:hover": { + color: theme.palette.text.disabled, + }, + }, + }), }, }, - }, - MuiTable: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - display: "table", - width: "auto", - borderCollapse: "separate", - borderSpacing: 0, - border: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`, - borderRadius: theme.mixins.borderRadius, - marginBlock: theme.spacing(0), - marginInline: theme.spacing(0), - lineHeight: theme.typography.ui.lineHeight, - - "&:only-child": { - marginBlockEnd: 0, + MuiTabPanel: { + styleOverrides: { + root: { + padding: 0, }, - - ...(ownerState.stickyHeader && { + }, + }, + MuiTable: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + display: "table", + width: "auto", borderCollapse: "separate", - }), + borderSpacing: 0, + border: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`, + borderRadius: theme.mixins.borderRadius, + marginBlock: theme.spacing(0), + marginInline: theme.spacing(0), + lineHeight: theme.typography.ui.lineHeight, - caption: { - clip: "rect(0 0 0 0)", - clipPath: "inset(50%)", - height: "1px", - overflow: "hidden", - position: "absolute", - whiteSpace: "nowrap", - width: "1px", - }, - }), + "&:only-child": { + marginBlockEnd: 0, + }, + + ...(ownerState.stickyHeader && { + borderCollapse: "separate", + }), + + caption: { + clip: "rect(0 0 0 0)", + clipPath: "inset(50%)", + height: "1px", + overflow: "hidden", + position: "absolute", + whiteSpace: "nowrap", + width: "1px", + }, + }), + }, }, - }, - MuiTableCell: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - ...theme.typography.body1, - maxWidth: theme.mixins.maxWidth, - borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`, - textAlign: "start", - verticalAlign: "baseline", - padding: "unset", - paddingBlock: theme.spacing(4), - paddingInline: theme.spacing(4), - overflowWrap: "break-word", - - [`.${tableRowClasses.root}:hover &[rowspan]`]: { - backgroundColor: theme.palette.common.white, - }, + MuiTableCell: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + ...theme.typography.body1, + maxWidth: theme.mixins.maxWidth, + borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`, + textAlign: "start", + verticalAlign: "baseline", + padding: "unset", + paddingBlock: theme.spacing(4), + paddingInline: theme.spacing(4), + overflowWrap: "break-word", - [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: { - borderBottom: 0, - }, + [`.${tableRowClasses.root}:hover &[rowspan]`]: { + backgroundColor: theme.palette.common.white, + }, - [`.${tableRowClasses.selected} &`]: { - borderBottomColor: theme.palette.primary.light, - }, + [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: + { + borderBottom: 0, + }, - [`.${tableRowClasses.selected}:hover &`]: { - borderBottomColor: theme.palette.primary.main, - }, + [`.${tableRowClasses.selected} &`]: { + borderBottomColor: theme.palette.primary.light, + }, - ...(ownerState.variant === "action" && { - paddingBlock: 0, - }), + [`.${tableRowClasses.selected}:hover &`]: { + borderBottomColor: theme.palette.primary.main, + }, - ...(ownerState.variant === "body" && { - color: theme.palette.text.primary, - }), + ...(ownerState.variant === "action" && { + paddingBlock: 0, + }), - ...(ownerState.variant === "date" && { - whiteSpace: "nowrap", - }), + ...(ownerState.variant === "body" && { + color: theme.palette.text.primary, + }), - ...(ownerState.variant === "footer" && { - color: theme.palette.text.secondary, - lineHeight: theme.typography.body1.lineHeight, - fontSize: theme.typography.body1.fontSize, - }), + ...(ownerState.variant === "date" && { + whiteSpace: "nowrap", + }), - [`.${tableHeadClasses.root} &`]: { - color: theme.palette.text.secondary, - lineHeight: theme.typography.body1.lineHeight, - fontWeight: theme.typography.fontWeightBold, - backgroundColor: theme.palette.grey[50], - }, + ...(ownerState.variant === "footer" && { + color: theme.palette.text.secondary, + lineHeight: theme.typography.body1.lineHeight, + fontSize: theme.typography.body1.fontSize, + }), - ...(ownerState.variant === "head" && { - lineHeight: theme.typography.body1.lineHeight, - fontWeight: theme.typography.fontWeightBold, - }), + [`.${tableHeadClasses.root} &`]: { + color: theme.palette.text.secondary, + lineHeight: theme.typography.body1.lineHeight, + fontWeight: theme.typography.fontWeightBold, + backgroundColor: theme.palette.grey[50], + }, - ...(ownerState.variant === "number" && { - textAlign: "end", - fontFeatureSettings: '"lnum", "tnum"', - }), + ...(ownerState.variant === "head" && { + lineHeight: theme.typography.body1.lineHeight, + fontWeight: theme.typography.fontWeightBold, + }), - ...(ownerState.padding === "checkbox" && { - width: 48, // prevent the checkbox column from growing - padding: "0 0 0 4px", - }), + ...(ownerState.variant === "number" && { + textAlign: "end", + fontFeatureSettings: '"lnum", "tnum"', + }), - ...(ownerState.padding === "none" && { - padding: 0, - }), + ...(ownerState.padding === "checkbox" && { + width: 48, // prevent the checkbox column from growing + padding: "0 0 0 4px", + }), - ...(ownerState.align === "left" && { - textAlign: "start", - }), + ...(ownerState.padding === "none" && { + padding: 0, + }), - ...(ownerState.align === "center" && { - textAlign: "center", - }), + ...(ownerState.align === "left" && { + textAlign: "start", + }), - ...(ownerState.align === "right" && { - textAlign: "end", - flexDirection: "row-reverse", - }), + ...(ownerState.align === "center" && { + textAlign: "center", + }), + + ...(ownerState.align === "right" && { + textAlign: "end", + flexDirection: "row-reverse", + }), - ...(ownerState.align === "justify" && { - textAlign: "justify", + ...(ownerState.align === "justify" && { + textAlign: "justify", + }), }), - }), - }, - }, - MuiTableContainer: { - defaultProps: { - // @ts-expect-error valid prop and value; MUI TS bug - component: "figure", + }, }, - styleOverrides: { - root: ({ theme }) => ({ - width: "unset", - maxWidth: "100%", - marginBlockStart: theme.spacing(0), - marginBlockEnd: theme.spacing(4), - marginInline: 0, - overflowX: "auto", - - "&:last-child": { - marginBlock: 0, - }, - }), + MuiTableContainer: { + defaultProps: { + // @ts-expect-error valid prop and value; MUI TS bug + component: "figure", + }, + styleOverrides: { + root: ({ theme }) => ({ + width: "unset", + maxWidth: "100%", + marginBlockStart: theme.spacing(0), + marginBlockEnd: theme.spacing(4), + marginInline: 0, + overflowX: "auto", + + "&:last-child": { + marginBlock: 0, + }, + }), + }, }, - }, - MuiTableRow: { - styleOverrides: { - root: ({ theme }) => ({ - verticalAlign: "unset", - [`&.${tableRowClasses.root}:hover`]: { - backgroundColor: theme.palette.grey[50], - }, - [`&.${tableRowClasses.selected}`]: { - backgroundColor: theme.palette.primary.lighter, - "&:hover": { + MuiTableRow: { + styleOverrides: { + root: ({ theme }) => ({ + verticalAlign: "unset", + [`&.${tableRowClasses.root}:hover`]: { + backgroundColor: theme.palette.grey[50], + }, + [`&.${tableRowClasses.selected}`]: { backgroundColor: theme.palette.primary.lighter, + "&:hover": { + backgroundColor: theme.palette.primary.lighter, + }, }, - }, - }), - }, - }, - MuiTableSortLabel: { - defaultProps: { - IconComponent: ArrowDownIcon, + }), + }, }, - styleOverrides: { - root: ({ theme }) => ({ - cursor: "pointer", - display: "inline-flex", - justifyContent: "flex-start", - flexDirection: "inherit", - alignItems: "center", - "&:focus-visible": { - color: theme.palette.text.primary, - outlineOffset: theme.spacing(4), - outlineStyle: "solid", - outlineWidth: "2px", - outlineColor: theme.palette.primary.main, - }, - "&:hover": { - color: theme.palette.text.primary, - [`& .${tableSortLabelClasses.icon}`]: { - opacity: 1, + MuiTableSortLabel: { + defaultProps: { + IconComponent: ArrowDownIcon, + }, + styleOverrides: { + root: ({ theme }) => ({ + cursor: "pointer", + display: "inline-flex", + justifyContent: "flex-start", + flexDirection: "inherit", + alignItems: "center", + "&:focus-visible": { + color: theme.palette.text.primary, + outlineOffset: theme.spacing(4), + outlineStyle: "solid", + outlineWidth: "2px", + outlineColor: theme.palette.primary.main, }, - }, - [`&.${tableSortLabelClasses.active}`]: { - color: theme.palette.text.secondary, - [`& .${tableSortLabelClasses.icon}`]: { - opacity: 1, - color: "inherit", + "&:hover": { + color: theme.palette.text.primary, + [`& .${tableSortLabelClasses.icon}`]: { + opacity: 1, + }, + }, + [`&.${tableSortLabelClasses.active}`]: { + color: theme.palette.text.secondary, + [`& .${tableSortLabelClasses.icon}`]: { + opacity: 1, + color: "inherit", + }, }, - }, - }), - icon: ({ theme, ownerState }) => ({ - fontSize: "inherit", - marginInlineEnd: 0, - marginInlineStart: 0, - opacity: 0, - color: "inherit", - transition: theme.transitions.create(["opacity", "transform"], { - duration: theme.transitions.duration.shorter, }), - userSelect: "none", + icon: ({ theme, ownerState }) => ({ + fontSize: "inherit", + marginInlineEnd: 0, + marginInlineStart: 0, + opacity: 0, + color: "inherit", + transition: theme.transitions.create(["opacity", "transform"], { + duration: theme.transitions.duration.shorter, + }), + userSelect: "none", - [`.${tableCellClasses.alignRight} &`]: { - marginInlineEnd: theme.spacing(2), - }, + [`.${tableCellClasses.alignRight} &`]: { + marginInlineEnd: theme.spacing(2), + }, - [`.${tableCellClasses.alignLeft} &`]: { - marginInlineStart: theme.spacing(2), - }, + [`.${tableCellClasses.alignLeft} &`]: { + marginInlineStart: theme.spacing(2), + }, - ...(ownerState.direction === "desc" && { - transform: "rotate(0deg)", - }), - ...(ownerState.direction === "asc" && { - transform: "rotate(180deg)", + ...(ownerState.direction === "desc" && { + transform: "rotate(0deg)", + }), + ...(ownerState.direction === "asc" && { + transform: "rotate(180deg)", + }), }), - }), - }, - }, - MuiTabs: { - styleOverrides: { - root: ({ theme }) => ({ - minHeight: "unset", - marginBottom: theme.spacing(5), - }), - flexContainer: ({ theme }) => ({ - gap: theme.spacing(5), - borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`, - }), + }, }, - }, - MuiTooltip: { - defaultProps: { - arrow: true, - enterDelay: 500, - enterNextDelay: 250, - placement: "top", + MuiTabs: { + styleOverrides: { + root: ({ theme }) => ({ + minHeight: "unset", + marginBottom: theme.spacing(5), + }), + flexContainer: ({ theme }) => ({ + gap: theme.spacing(5), + borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`, + }), + }, }, - styleOverrides: { - tooltip: ({ theme, ownerState }) => ({ - maxWidth: `calc(${theme.mixins.maxWidth} / 2)`, - paddingBlock: theme.spacing(2), - paddingInline: theme.spacing(3), - backgroundColor: theme.palette.grey[900], - color: theme.palette.common.white, - fontSize: theme.typography.subtitle1.fontSize, - lineHeight: theme.typography.subtitle1.lineHeight, - ...(ownerState.touch === true && { + MuiTooltip: { + defaultProps: { + arrow: true, + enterDelay: 500, + enterNextDelay: 250, + placement: "top", + }, + styleOverrides: { + tooltip: ({ theme, ownerState }) => ({ + maxWidth: `calc(${theme.mixins.maxWidth} / 2)`, paddingBlock: theme.spacing(2), paddingInline: theme.spacing(3), + backgroundColor: theme.palette.grey[900], + color: theme.palette.common.white, fontSize: theme.typography.subtitle1.fontSize, lineHeight: theme.typography.subtitle1.lineHeight, - fontWeight: theme.typography.fontWeightRegular, - }), - [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: { - transformOrigin: "right center", - ...(ownerState.isRtl - ? { - marginInlineStart: theme.spacing(3), - ...(ownerState.touch === true && { - marginInlineStart: theme.spacing(4), - }), - } - : { - marginInlineEnd: theme.spacing(3), - ...(ownerState.touch === true && { - marginInlineEnd: theme.spacing(4), - }), - }), - }, - [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: { - transformOrigin: "left center", - ...(ownerState.isRtl - ? { - marginInlineEnd: theme.spacing(3), - ...(ownerState.touch === true && { - marginInlineEnd: theme.spacing(4), - }), - } - : { - marginInlineStart: theme.spacing(3), - ...(ownerState.touch === true && { - marginInlineStart: theme.spacing(4), - }), - }), - }, - [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: { - transformOrigin: "center bottom", - marginBottom: theme.spacing(3), ...(ownerState.touch === true && { - marginBottom: theme.spacing(4), + paddingBlock: theme.spacing(2), + paddingInline: theme.spacing(3), + fontSize: theme.typography.subtitle1.fontSize, + lineHeight: theme.typography.subtitle1.lineHeight, + fontWeight: theme.typography.fontWeightRegular, }), - }, - [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: { - transformOrigin: "center top", - marginTop: theme.spacing(3), - ...(ownerState.touch === true && { - marginTop: theme.spacing(4), - }), - }, - }), - arrow: ({ theme }) => ({ - color: theme.palette.grey[900], - "&::before": { - borderRadius: "0", - }, + [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: { + transformOrigin: "right center", + ...(ownerState.isRtl + ? { + marginInlineStart: theme.spacing(3), + ...(ownerState.touch === true && { + marginInlineStart: theme.spacing(4), + }), + } + : { + marginInlineEnd: theme.spacing(3), + ...(ownerState.touch === true && { + marginInlineEnd: theme.spacing(4), + }), + }), + }, + [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: { + transformOrigin: "left center", + ...(ownerState.isRtl + ? { + marginInlineEnd: theme.spacing(3), + ...(ownerState.touch === true && { + marginInlineEnd: theme.spacing(4), + }), + } + : { + marginInlineStart: theme.spacing(3), + ...(ownerState.touch === true && { + marginInlineStart: theme.spacing(4), + }), + }), + }, + [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: { + transformOrigin: "center bottom", + marginBottom: theme.spacing(3), + ...(ownerState.touch === true && { + marginBottom: theme.spacing(4), + }), + }, + [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: { + transformOrigin: "center top", + marginTop: theme.spacing(3), + ...(ownerState.touch === true && { + marginTop: theme.spacing(4), + }), + }, + }), + arrow: ({ theme }) => ({ + color: theme.palette.grey[900], + "&::before": { + borderRadius: "0", + }, - [`.${tooltipClasses.popper}[data-popper-placement*="top"] &::before`]: { - borderRadius: `0 0 3px 0`, - }, + [`.${tooltipClasses.popper}[data-popper-placement*="top"] &::before`]: + { + borderRadius: `0 0 3px 0`, + }, - [`.${tooltipClasses.popper}[data-popper-placement*="right"] &::before`]: - { - borderRadius: `0 0 0 3px`, - }, + [`.${tooltipClasses.popper}[data-popper-placement*="right"] &::before`]: + { + borderRadius: `0 0 0 3px`, + }, - [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &::before`]: - { - borderRadius: `3px 0 0 0`, - }, + [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &::before`]: + { + borderRadius: `3px 0 0 0`, + }, - [`.${tooltipClasses.popper}[data-popper-placement*="left"] &::before`]: - { - borderRadius: `0 3px 0 0`, - }, - }), - }, - }, - MuiTypography: { - defaultProps: { - fontFamily: - "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif", - variantMapping: { - h1: "h1", - h2: "h2", - h3: "h3", - h4: "h4", - h5: "h5", - h6: "h6", - subtitle1: "p", - body1: "p", - inherit: "p", - legend: "legend", + [`.${tooltipClasses.popper}[data-popper-placement*="left"] &::before`]: + { + borderRadius: `0 3px 0 0`, + }, + }), }, }, - styleOverrides: { - paragraph: ({ theme }) => ({ - marginBottom: theme.spacing(4), - }), + MuiTypography: { + defaultProps: { + fontFamily: + "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif", + variantMapping: { + h1: "h1", + h2: "h2", + h3: "h3", + h4: "h4", + h5: "h5", + h6: "h6", + subtitle1: "p", + body1: "p", + inherit: "p", + legend: "legend", + }, + }, + styleOverrides: { + paragraph: ({ theme }) => ({ + marginBottom: theme.spacing(4), + }), + }, }, - }, + }; }; diff --git a/packages/odyssey-react-mui/src/theme/index.ts b/packages/odyssey-react-mui/src/theme/index.ts index cf156b156f..a0d5917d79 100644 --- a/packages/odyssey-react-mui/src/theme/index.ts +++ b/packages/odyssey-react-mui/src/theme/index.ts @@ -13,6 +13,6 @@ import * as Tokens from "@okta/odyssey-design-tokens"; export * from "./theme"; -export { useTheme } from "./useTheme"; +export { useTheme } from "@mui/material/styles"; export type DesignTokensOverride = Partial; diff --git a/packages/odyssey-react-mui/src/theme/temp.ts b/packages/odyssey-react-mui/src/theme/temp.ts deleted file mode 100644 index db9a108260..0000000000 --- a/packages/odyssey-react-mui/src/theme/temp.ts +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved. - * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") - * - * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * - * See the License for the specific language governing permissions and limitations under the License. - */ - -export type Temp = { - borderWidth: string; -}; - -export const temp: Temp = { - borderWidth: "24px", -}; diff --git a/packages/odyssey-react-mui/src/theme/theme.ts b/packages/odyssey-react-mui/src/theme/theme.ts index 79910dd96f..d0537fc270 100644 --- a/packages/odyssey-react-mui/src/theme/theme.ts +++ b/packages/odyssey-react-mui/src/theme/theme.ts @@ -17,7 +17,6 @@ import { mixins } from "./mixins"; import { palette } from "./palette"; import { shape } from "./shape"; import { spacing } from "./spacing"; -import { temp } from "./temp"; import { typography } from "./typography"; import "./components.types"; import "./mixins.types"; @@ -25,16 +24,13 @@ import "./palette.types"; import "./typography.types"; import { DesignTokensOverride } from "."; -export type { OdysseyTheme } from "./OdysseyTheme"; - export const createOdysseyMuiTheme = (odysseyTokens: DesignTokensOverride) => { return createTheme({ - components, + components: components(odysseyTokens), mixins: mixins(odysseyTokens), palette: palette(odysseyTokens), shape: shape(odysseyTokens), spacing: spacing(odysseyTokens), - temp, typography: typography(odysseyTokens), }); }; diff --git a/packages/odyssey-react-mui/src/theme/useTheme.ts b/packages/odyssey-react-mui/src/theme/useTheme.ts deleted file mode 100644 index ff791c8d5e..0000000000 --- a/packages/odyssey-react-mui/src/theme/useTheme.ts +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved. - * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") - * - * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * - * See the License for the specific language governing permissions and limitations under the License. - */ - -import { useTheme as useMuiTheme } from "@mui/material/styles"; - -import type { OdysseyTheme } from "./OdysseyTheme"; - -export const useTheme = (...args: Parameters) => - useMuiTheme(...args); diff --git a/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx b/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx index e666c5cc1e..71e5fb9ff0 100644 --- a/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx +++ b/packages/odyssey-storybook/src/contributing/CustomTheme.stories.tsx @@ -17,7 +17,6 @@ import { MenuItem, MenuList, MuiThemeProvider, - OdysseyTheme, OdysseyThemeProvider, Paper, Radio, @@ -126,7 +125,7 @@ export const CustomComponentStory: StoryObj = { }, }; }, []); - const odysseyTheme: OdysseyTheme = createOdysseyMuiTheme(Tokens); + const odysseyTheme = createOdysseyMuiTheme(Tokens); const customOdysseyTheme = useMemo( () => themeOverrides && createTheme(deepmerge(odysseyTheme, themeOverrides)), diff --git a/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx b/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx index 8672627eaf..0fa4f5958c 100644 --- a/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx +++ b/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx @@ -73,61 +73,76 @@ You can also override Odyssey's global theme. Doing so is much more complex than In general, we advise teams never shift any colors or spacing values from the defaults unless you have an explict design reason to do so. -To customize your theme, you'll want `OdysseyThemeProvider`. This component automatically merges any theme changes into the Odyssey theme for you. +To customize your theme, you need to use `MuiThemeProvider` directly after merging your theme changes with the Odyssey theme. Our theming utilizes MUI's `ThemeOptions` under-the-hood, so you can find more in-depth information customizing the theme [in their docs](https://mui.com/material-ui/customization/theming/). ```jsx import * as Tokens from "@okta/odyssey-design-tokens"; import { - createTheme, + ThemeOptions, OdysseyCacheProvider, - OdysseyThemeProvider, + DesignTokensOverride, + createOdysseyMuiTheme, + createTheme, + deepmerge, + MuiThemeProvider, } from "@okta/odyssey-react-mui"; -const myThemeOverrides = { - components: { - MuiAlert: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.text.secondary, - }), +import { useMemo } from "react"; +import * as Tokens from "@okta/odyssey-design-tokens"; + +const themeOverrides: ThemeOptions = useMemo(() => { + return { + components: { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.secondary, + }), + }, }, }, - }, - mixins: { - borderWidth: Tokens.BorderWidthBase + 2, - }, - palette: { - primary: { - main: Tokens.ColorPaletteNeutral900, - } - }, - shape: { - borderRadius: 4, - }, - spacing: [ - Tokens.SpaceScale0, - Tokens.SpaceScale1, - Tokens.SpaceScale2, - Tokens.SpaceScale3, - Tokens.SpaceScale4, - Tokens.SpaceScale5, - Tokens.SpaceScale6, - Tokens.SpaceScale7, - Tokens.SpaceScale8, - Tokens.SpaceScale9, - ], - typography: { - fontSize: 16, - }, -} + mixins: { + borderWidth: Tokens.BorderWidthBase + 2, + }, + palette: { + primary: { + main: Tokens.ColorPaletteNeutral900, + } + }, + shape: { + borderRadius: 4, + }, + spacing: [ + Tokens.SpaceScale0, + Tokens.SpaceScale1, + Tokens.SpaceScale2, + Tokens.SpaceScale3, + Tokens.SpaceScale4, + Tokens.SpaceScale5, + Tokens.SpaceScale6, + Tokens.SpaceScale7, + Tokens.SpaceScale8, + Tokens.SpaceScale9, + ], + typography: { + fontSize: 16, + }, +}, []); + +const odysseyTheme = createOdysseyMuiTheme(Tokens); +const customOdysseyTheme = useMemo( + () => + themeOverrides && createTheme(deepmerge(odysseyTheme, themeOverrides)), + [odysseyTheme, themeOverrides] +); const YourAppRoot = ({ children }) => ( - + {children} - + ); ```