chore: added inverseBackground in checkbox

Signed-off-by: captain-Akshay <[email protected]>
layer5io · Jul 22, 2024 · 4073e8f · 4073e8f
1 parent 22f1e0b
commit 4073e8f
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/theme/components/checkbox.modifier.ts b/src/theme/components/checkbox.modifier.ts
@@ -2,14 +2,18 @@ import { Components, Theme } from '@mui/material';
 
 export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
   styleOverrides: {
-    root: ({ theme }) => {
+    root: ({ theme, ownerState }) => {
       const {
         palette: {
           text: { default: defaultText },
           background: { brand },
-          border: { strong }
+          border: { strong },
+          mode
         }
       } = theme;
+
+      const inverseBackground = ownerState.inverseBackground || false;
+
       return {
         color: 'transparent',
         '&.Mui-checked': {
@@ -25,7 +29,10 @@ export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
         '& .MuiSvgIcon-root': {
           width: '1.25rem',
           height: '1.25rem',
-          border: `.75px solid ${strong}`,
+          fill: inverseBackground ? (mode === 'light' ? 'white' : 'black') : defaultText,
+          border: `.75px solid ${
+            inverseBackground ? (mode === 'light' ? 'white' : 'black') : strong
+          }`,
           borderRadius: '2px',
           padding: '0px'
         },