[EuiThemeProvider] Add context & state required for theme CSS variables architecture

[cee-chen]

Summary

⚠️ NOTE: This PR is merging into a feature branch, as it doesn't make much sense on its own without another component utilizing its behavior.

This PR adds the architecture for CSS variables to be set by EUI components. This is part of the work needed for #7025, in particular:

Some components have style-related variables that may need to be reused by consumers, or even by other components within EUI. Examples of these are euiFormVariables and euiHeaderVariables.
Instead of moving these style variables outside our .styles.ts files and continuing to export them publicly, @tkajtoch has suggested switching them to CSS variables instead. This will involve:
[...] Declaring these component style vars once at the top level in our global styles (ensuring consumers have access to the default vars everywhere in the app)

Screencaps

Global theme variables:

Local theme variables:

QA

• gh pr checkout 7132
• yarn storybook
• Go to http://localhost:6006/?path=/story/euithemeprovider--css-variables-nearest and inspect the story's CSS
• Confirm the red text is setting its color from a CSS var, and that CSS var definition is set in :root
• Confirm the blue text is setting its color from a CSS var, and that CSS var definition is set on the parent .euiThemeProvider wrapper
• Go to http://localhost:6006/?path=/story/euithemeprovider--css-variables-global
• Confirm both text lines are setting using css var definition from :root

General checklist

• Checked in Chrome, Safari, Edge, and Firefox - caniuse CSS variables
• Added or updated jest and cypress tests
• [ ] Added documentation No documentation, this architecture is meant for EUI internal components, not for consumers
• [ ] A changelog entry exists and is marked appropriately No changelog, see above reasoning

[cee-chen]

@1Copenut As a heads up, I'll be assigning more PRs to you this week as Bree is out and since you're already on support this week.

[cee-chen]

Reference: https://github.com/jsdom/jsdom/releases/tag/20.0.0

We'll need to update Jest to latest to get a more recent version of jsdom (#6813)

[cee-chen]

[attaching to a semi-random file for threading]

I'm debating making this a hook, e.g. useEuiCSSVariables(). Right now an EUI component will have to do this:

import React, { useContext } from 'react';
import { EuiNestedThemeContext } from '../services/theme';

const EuiComponent = () => {
  const { setGlobalCSSVariables } = useContext(EuiNestedThemeContext);
}

which feels like it could be cleaner/more elegant 🤔

[cee-chen]

I'm also debating adding a section about this in our Emotion wiki. I'm not totally sure what to write just yet and that may become clearer once I actually have the EuiHeader work in front of me, so I may hold off on that wiki doc until the last PR that actually merges in the feature branch into main.

[cee-chen]

I added a hook after all in 6f4f6b2, but will continue to hold off on a wiki document for a bit

[cee-chen]

This story isn't related to this PR, I just thought I'd add it as a tech debt item while here (and also as a comparison to the existing stories)

[kibanamachine]

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 6f4f6b2

[1Copenut]

I ran through the Storybook examples and updated a couple on the fly to see changes on my local. Having this ability and the tests helped document the changeset and understand how the CSS variables flow up.

[cee-chen]

Thanks Trevor!

Going to go ahead and merge this in, but if anyone on the team has any other feedback, this is a feature branch and I'm happy to continue tweaking functionality and architecture!