[Emotion] Convert EuiTitle

[cee-chen]

Summary

I strongly recommend following along by commit.

What this PR does:

• Converts EuiTitle fully over to CSS-in-JS
• Removes extra CSS modifier classes (5404cb8)
  • I grepped through Kibana and this will only affect in snapshot changes and 1 source code usage that should be converted to <EuiTitle /> in any case
• Adds an euiTextBreakWord CSS 'mixin' that matches what EuiBeacon did with euiCanAnimate
• Creates a CSS-in-JS version of the euiTitle() Sass mixin, that now lives in the component directory and not in global_styling
  • This is a deliberate breaking change away from our previous Sass theme variables that allowed styling titles per-sizes
  • Per @thompsongl: Moving more styling into the component makes it easier for a component to react to theme differences, rather than needing the theme to account for each component

What this PR does not do:

• Look through internal usage of the euiTitle() Sass mixin and potentially convert them <EuiTitle /> (TBD, hopefully my next PR)
• Delete the euiTitle() Sass mixin or $euiTitles Sass variable/JSON mappings
• Update documentation around the Sass mixin or variable

Checklist

• Does the output CSS match the previous CSS / as expected
• Does the rendered class read as expected

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5842/

[cchaos]

Update documentation around the Sass mixin or variable

I highly suggest adding documentation around the new JS version of euiTextBreakWord. You can just follow the same pattern as we did for Scroll and create a new Utility page for Text and move the CSS utilities there too. If you really want to do that in a follow up, that's fine as long as we're tracking those somewhere. But I'm hoping not to fall into the trap where we had so many undocumented but helpful Sass helpers/mixins.

[cee-chen]

I think that should be all your comments addressed @cchaos (excepting euiTextBreakWord, if you're fine with that being a follow-up PR). Let me know what you think!

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5842/

[cchaos]

Just a couple code nits while I spot check some of these downstream components

[cchaos]

Suggested change

	* A font weight key for setting the base title weight
	* A font weight key for setting the base weight for titles and headings

[cchaos]

We'll also need to add this to the Customizing section of the theme docs at some point. No rush now since we don't have anything setup yet for selecting from a list.

Also, do you think we should actually move the colors.title into this new theme key specifically? So we'd get:

euiTheme.title.weight and euiTheme.title.color

[cee-chen]

I'm good with that! I'll make that change here in a little bit

[cee-chen]

Oh actually, spoke too soon. Looks like we can't easily do that because colors has its own custom computed logic plus light vs dark mode settings. We should probably just leave it where it is 🤔

[cchaos]

No problem, we can check it out in a later PR.

[cchaos]

I've checked through the updated snapshot components for any regressions, didn't find anything too big. I think just one small thing we can do here, the rest will follow up on.

[cee-chen]

jenkins test this

[leathekd]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5842/