fix: contrast text color

lifinance · Aug 22, 2022 · 4d090e9 · 4d090e9
1 parent 7fa62be
commit 4d090e9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -1,4 +1,5 @@
 import type { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
+import { common } from '@mui/material/colors';
 import { dialogActionsClasses } from '@mui/material/DialogActions';
 import {
   alpha,
@@ -209,9 +210,9 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
           contained: {
             '&:hover': {
               color:
-                getContrastRatio('rgb(0, 0, 0)', primaryMainColor) >= 3
-                  ? 'rgb(0, 0, 0)'
-                  : 'rgb(255, 255, 255)',
+                getContrastRatio(common.white, primaryMainColor) >= 3
+                  ? common.white
+                  : common.black,
             },
           },
         },

diff --git a/packages/widget/src/utils/colors.ts b/packages/widget/src/utils/colors.ts
@@ -1,4 +1,5 @@
 import type { Theme } from '@mui/material';
+import { common } from '@mui/material/colors';
 import { getContrastRatio } from '@mui/material/styles';
 
 export const getContrastAlphaColor = (theme: Theme, alpha: string | number) =>
@@ -7,7 +8,6 @@ export const getContrastAlphaColor = (theme: Theme, alpha: string | number) =>
     : `rgb(255 255 255 / ${alpha})`;
 
 export const getContrastTextColor = (theme: Theme, background?: string) =>
-  getContrastRatio('rgb(0, 0, 0)', background ?? theme.palette.primary.main) >=
-  3
-    ? 'rgb(0, 0, 0)'
-    : 'rgb(255, 255, 255)';
+  getContrastRatio(common.white, background ?? theme.palette.primary.main) >= 3
+    ? common.white
+    : common.black;