BaseControl: Use CSS-in-JS

[sarayourfriend]

Description

This PR updates the BaseControl component to use CSS-in-JS similar to how newer components do like the AnglePickerControl and Text. This should not include any breaking changes as all the old classnames are still being rendered so consumers may still easily target those components.

I also updated the story to use the TextareaControl component rather than a raw textarea.

This also introduces a new style-mixin called font. I'm just guessing at this part @ItsJonQ might have some good input.

How has this been tested?

I've tested the changes in Storybook and have confirmed there are no visual changes between the two versions.

One thing that is not tested is the components-panel__row rule. I'm unsure how to test this.

Screenshots

Storybook before

Storybook after

Types of changes

Non-breaking CSS-in-JS usage instead of Sass.

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]

🚀 from me! Thank you @saramarcondes 🙏

It looks like this is the start of a collection of font based CSS-in-JS mixins :).
That's exciting!

The snapshot changes make sense, as BaseField is adding a couple of Jest emotion classes.

I think we may need to rebase + regenerate a snapshot, and we should be good 👍

[talldan]

@sarayourfriend Was just making some changes to BaseControl and wondering if the style.scss file should be deleted as well, or do we keep it around for some back compat purposes?

[sarayourfriend]

@talldan It should be deleted, that was an oversight on my part, sorry about that! Thanks for catching it 🙂

[talldan]

@sarayourfriend Cool, thanks for confirming. I can delete as part of #29550.