Fix(theme): Scope transparent color in checkbox modifier to default unchecked icon

[kanishksingh23]

Notes for Reviewers
I have scoped the color: 'transparent' override in checkbox.modifier.ts exclusively to the default unchecked, non-indeterminate icon states. This prevents the global transparency override from leaking down to custom child icons (like FilterAllIcon in the cluster menu) and indeterminate checkboxes, while keeping default checkbox styling intact.

This PR fixes #1621

Signed commits

• Yes, I signed my commits.

[gemini-code-assist]

Code Review

This pull request updates the Material-UI checkbox theme component by moving the transparent color style from the base checkbox to only target unchecked and non-indeterminate SVG icon roots. The reviewer raised a valid concern that this approach will make custom icons passed via the 'icon' prop completely invisible and suggested using 'defaultProps' to define custom default icons instead.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Applying color: 'transparent' to all .MuiSvgIcon-root elements inside an unchecked, non-indeterminate checkbox will make any custom icon passed via the icon prop completely invisible. Additionally, the custom border styles applied to .MuiSvgIcon-root on lines 32-38 will also be forced onto any custom icon, which is usually undesirable.

To support custom icons properly without hacking the global .MuiSvgIcon-root styles, consider defining custom default icons using defaultProps in the theme, or targeting only the default icon paths if possible.

For example, you can define custom default icons in defaultProps:

export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
  defaultProps: {
    icon: <DefaultUncheckedIcon />,
    checkedIcon: <DefaultCheckedIcon />,
  },
  // ...
};

This keeps the styling scoped strictly to the default checkbox icons and prevents style leakage to custom icons.

[kanishksingh23]

Thanks for the suggestion! That is a very clean architectural approach.

Currently, Sistent does not have custom unchecked/checked SVG components in the repository, and using defaultProps would require bundling custom SVG paths/components with the theme.

For now, this scoped CSS selector: &:not(.Mui-checked): not(.Mui-indeterminate). MuiSvgIcon-root serves as a pragmatic, CSS-only fix to isolate the transparency override as much as possible to the default unchecked state. Since custom icons used in our components (like FilterAllIcon) define explicit fills/styles, they successfully bypass this override.

[banana-three-join]

I feel like this solution look good in paper but it also brings another set of issues. What's going to happen to the SVGs that inherit this "color: transparent" property in "fill: currentColor"? If the parent doesn't has a color attribute defined, it'll go to the grandparent searching for it, causing a series of unpredictable issues. Also, it's not easy to debug when the items are using this pseudo class so that's another issue. It might be a better approach to look into creating a DefaultUncheckedIcon but the issue is that MUI handles it's own icons when don't being checked so it'll be good to see how MUI handles their to implement the same solution so all of the icons have the same behavior to them once unchecked even if they're custom ones.

[kanishksingh23]

@banana-three-join, I agree that using pseudo-classes (: not(.Mui-checked)) is hard to debug and can cause inheritance issues, where child elements look up the grandparent chain for their colour.

As you suggested, I am going to implement the DefaultUncheckedIcon approach instead, completely removing the CSS transparency and border tricks:

1. Create Default Icons: Create CheckboxIcon and CheckboxCheckedIcon inside Sistent's assets.
2. Set via defaultProps: Register these icons under MuiCheckbox.defaultProps in the theme modifier.

This ensures that:

1. Standard checkboxes render Sistent's exact border design using the native SVG path.
2. Custom icons passed down by consumers are fully visible and inherit color/fill properly.

[leecalcote]

The checkbox on the "Where would you like to start" modal in Layer5 Cloud might be an example of where checkbox mis-coloring occurs.

[kanishksingh23]

@leecalcote, thank you for pointing this out. Yes, since the color: 'transparent' override was applied globally to the checkbox root in Sistent, any checkbox in Layer5 Cloud that relied on custom icons or standard outlines would exhibit this mis-coloring/invisibility bug.

This PR removes that global transparency override and replaces it with proper default SVG icons, so it will resolve the invisibilty/mis-coloring bug.

[kanishksingh23]

I have verified the changes locally.

Unchecked state:

Checked state: