diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx index 59a3702ca3ae76..760927d0986caa 100644 --- a/docs/src/components/action/Highlighter.tsx +++ b/docs/src/components/action/Highlighter.tsx @@ -70,23 +70,24 @@ export default function Highlighter({ ...((!disableBorder || selected) && { borderColor: 'primaryDark.700', }), - ...(selected && { - bgcolor: `${alpha(theme.palette.primary[900], 0.3)}`, - borderColor: 'primary.700', - color: 'primary.300', - boxShadow: `0px 1px 6px ${ - (theme.vars || theme).palette.primary[800] - }, inset 0px 2px 8px ${(theme.vars || theme).palette.primaryDark[800]}`, - }), ...(!selected && { + borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`, '&:hover, &:focus': { - bgcolor: 'primaryDark.800', - borderColor: 'primaryDark.700', + bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`, + borderColor: `${alpha(theme.palette.primary[500], 0.3)}`, '@media (hover: none)': { bgcolor: 'transparent', }, }, }), + ...(selected && { + bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`, + borderColor: 'primary.700', + color: 'primary.300', + boxShadow: `0px 1px 6px ${ + (theme.vars || theme).palette.primary[800] + }, inset 0px 2px 8px ${(theme.vars || theme).palette.primaryDark[800]}`, + }), }), '&.Mui-disabled': { opacity: 0.4, diff --git a/docs/src/components/action/More.tsx b/docs/src/components/action/More.tsx index 66e88912337f49..6110b6529142fb 100644 --- a/docs/src/components/action/More.tsx +++ b/docs/src/components/action/More.tsx @@ -51,7 +51,7 @@ export default (function More(props: ButtonBaseProps) { }, }, ...theme.applyDarkStyles({ - borderColor: 'primaryDark.600', + borderColor: `${alpha(theme.palette.primaryDark[400], 0.3)}`, '&:hover, &:focus': { bgcolor: alpha(theme.palette.primary[900], 0.4), },