fix: shape and color theme inconsistency

lifinance · Jul 27, 2022 · 2701476 · 2701476
1 parent f8dd729
commit 2701476
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/packages/widget-embedded/src/index.css b/packages/widget-embedded/src/index.css
@@ -4,6 +4,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+a, a:hover {
+  color: red;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #000;

diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -4,8 +4,10 @@ import {
   alpha,
   createTheme as createMuiTheme,
   darken,
+  getContrastRatio,
   lighten,
 } from '@mui/material/styles';
+import { dark, light } from '@mui/material/styles/createPalette';
 import { ThemeConfig } from '../types';
 
 // https://mui.com/customization/palette/
@@ -68,6 +70,11 @@ const palette = {
   },
 };
 
+const shape = {
+  borderRadius: 12,
+  borderRadiusSecondary: 6,
+};
+
 export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
   createMuiTheme({
     typography: {
@@ -130,8 +137,7 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
           }),
     },
     shape: {
-      borderRadius: 12,
-      borderRadiusSecondary: 6,
+      ...shape,
       ...theme.shape,
     },
     breakpoints: {
@@ -181,7 +187,8 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
               }
             : {}),
           root: {
-            borderRadius: theme.shape?.borderRadiusSecondary,
+            borderRadius:
+              theme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary,
             textTransform: 'none',
             fontSize: '1rem',
             padding: '10px 16px',
@@ -197,12 +204,23 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
               pointerEvents: 'auto',
             },
           },
+          contained: {
+            '&:hover': {
+              color:
+                getContrastRatio(palette.primary.main, dark.text.primary) >= 3
+                  ? dark.text.primary
+                  : light.text.primary,
+            },
+          },
         },
       },
       MuiIconButton: {
         styleOverrides: {
           root: {
             color: 'inherit',
+            '&:hover': {
+              color: 'inherit',
+            },
           },
         },
       },