improve the highlighter component colors

mui · Sep 21, 2023 · 725235c · 725235c
1 parent 1454bf2
commit 725235c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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),
             },