Currently the Checkbox and Radio components use nested selectors to style states, some examples below:

[`:not(:checked) ~ .${radioClassNames.indicator} > *`]
':enabled'
':enabled:not(:checked)'

These kinds of styles have two important consequences that will impact partners when using these components

Override specificity

It is not obvious how to override slot styles without using important: https://codesandbox.io/s/funny-monad-xhjzj1?file=/example.tsx

const useStyles = makeStyles({
  checkedIndicator: {
    backgroundColor: "red"
  },
  checkedIndicatorImportant: {
    backgroundColor: "red !important"
  },
  checkedNestedIndicator: {
    ":enabled:checked:not(:indeterminate)": {
      [`& ~ .${checkboxClassNames.indicator}`]: {
        backgroundColor: "red"
      }
    }
  }
});

Since our components are liable to be used in our libraries that are shared and reused, these kinds of overrides are not scaleable in an app or cross app.

CSS classes bloat

Each control will contain more >100 CSS classes at any time. The use of nested selectors means that the classes are never applied conditionally and will always be there. This has a negative impact on performance since atomic css performance can decrease linearly with respect to the number of classes.

Checkbox

Radio