chore: added inverseBackground in checkbox

Signed-off-by: captain-Akshay <[email protected]>
layer5io · Jul 22, 2024 · 94614ab · 94614ab
1 parent 22f1e0b
commit 94614ab
Showing 1 changed file with 7 additions and 2 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 },
+          icon: { inverse: inverseColor },
           background: { brand },
           border: { strong }
         }
       } = theme;
+
+      const inverseBackground = ownerState.inverseBackground || false;
+
       return {
         color: 'transparent',
         '&.Mui-checked': {
@@ -25,7 +29,8 @@ export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
         '& .MuiSvgIcon-root': {
           width: '1.25rem',
           height: '1.25rem',
-          border: `.75px solid ${strong}`,
+          fill: inverseBackground ? inverseColor : defaultText,
+          border: `.75px solid ${inverseBackground ? inverseColor : strong}`,
           borderRadius: '2px',
           padding: '0px'
         },