RadioControl: Use CSS-in-JS

[sarayourfriend]

Description

Use CSS-in-JS for RadioControl.

Note: I discovered a bug documented here while working on this: #26293. This is a pre-existing bug that I'm not sure exactly how to fix. I think it should be done in the context of a separate pull request once this one is merged and once there is an answer about the intention for the radio control in the bug issue.

How has this been tested?

Verified there are no differences between this branch and production in Storybook. Also checked in Gutenberg itself.

Types of changes

Non-breaking CSS-in-JS refactor. All classnames are preserved allowing folks to continue targeting the classes that were already there.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[ItsJonQ]

@saramarcondes Haiii! I left a suggestion for verbose box-shadow vs Prettier 😂

[ItsJonQ]

@saramarcondes We're starting to venture into components that require references to the var( --wp-admin-theme-color ) variable. We currently don't have an automated way to handle this yet, which means it won't work currently in IE11.

I left some more thoughts here:
#26340 (comment)

I don't think there's a good solution yet, other than to manually hardcode the fallbacks 🙈

We could create a "mixin" that can output the property for use.. something like:

const StyledInput = styled.input`
  ${variable('background', 'wp-admin-theme-color', 'blue')}
`

That's kind of how you'd do it in Sass. I really don't like this solution. It's quite limited (e.g. handling multiple values) and feels... too abstract. But it is an option if we don't want to hand-write fallbacks.

Would love your thoughts!

[sarayourfriend]

@ItsJonQ Shall we compromise and update ui.theme in the colors values to be the following:

css`
  color: blue;
  color: var( --... );
`;

I think that might be a better option than trying to come up with a new solution for this when hopefully we could find an already baked one?

[ItsJonQ]

@saramarcondes We can certainly give that a shot 🎉

[sarayourfriend]

I'll update this in the FormToggle PR as it's older and I'm hoping to get it merged sooner 🙂

[sarayourfriend]

Closing in favor of focusing on G2-components integration.