[Meta][CSS-in-JS] Switching to `emotion`

[cchaos]

This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being transparent about our timeline.

(Tentative) Timeline & tasks

Spring 2021:

Get the contexts built out and (partially) used in the EUI components and docs, as well as thoroughly tested in downstream applications like Kibana and Cloud. Figure out all the dependencies, hooks and possible state management that go with it.

• EuiContext: Overall context layer that would encompass theming, layering, etc… ([CSS-in-JS] Context and foundation #4440)
• EuiThemeContext: Theme specific layer with at least these properties: ([CSS-in-JS] Context and foundation #4440)
  • themeName
  • colorMode: ‘light’ | ‘dark’
  • { colors: {primar, secondary, etc} }
• <ColorMode> aka: <DarkMode>{component}</DarkMode> for switching of themes at the component level ([CSS-in-JS] Context and foundation #4440)

Summer 2021:

• Build out the theme layer ([CSS-in-JS] Global theme #4643)
  • Convert all the SASS invisibles (variables, functions, etc) to JS
  • Usage documentation
• Enable Emotion in Kibana (Enable CSS-in-JS styling with emotion kibana#98157)
• Initial release of context layer and global theme ([FEATURE] CSS-in-JS via emotion, initial release #4511)
• Add more documentation ([Docs] EuiThemeProvider global theme switching #5072)
• Add global theme context provider in Kibana (Create a theming React context provider integration for applications kibana#108972)

Fall 2021:

Start shifting component styles from SASS to JS. This part will probably take a full year and probably means phasing out the old 'legacy' theme, making Amsterdam default.

• Add global reset file via Emotion ([CSS-in-JS] Global style reset with emotion #5122)
• Deprecate current theme for Amsterdam ([CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy #5222)
• EUI breaking/major release with peerDep on @emotion/react ([CSS-in-JS] @emotion/react in src/ #5121) from this point forward using only the generated CSS is not supported, EUI must be used through React

### 2022-2024
- [ ] #5685

Beyond component conversions:

• [ ] Deprecate Sass usage in EUI docs Not being done, as EUI docs will be deprecated in favor of EUI+
• [Emotion] Memoize all generated styles #7561
• [Emotion] Figure out what exports we do and don't want to make public #7025
• Convert Kibana's usage of styled-components to Emotion
• Deprecate using EUI's SCSS mixins/variables
• Elastic Charts theme as an EuiTheme

Needs discussion

• Remove use of ghost and ink in favor of EuiThemeProvider + colorMode (see discussion)
  • I'm not sure if this still needs to be done or if this is something to instead be visited in the new theme/visual refresh work.
• Deprecate using EUI's classnames
• Remove class names (after a lengthy deprecation period)
  • For context, the deprecation of classNames was something Caroline and Greg were pushing for. I'm not convinced that it's even feasible considering Kibana however.

[cchaos]

Requests

• [EuiLoadingX] Add speed prop (feature request) #4116
• [EuiFlexGrid] Add justifyContent and alignItems like EuiFlexGroup #4878
• Bottom bar too subtle to get properly noticed #4158
• [Discuss] Cross-browser focus states for overflow containers #3385
• [EuiFlexGrid] Allow number of columns based on viewport size #2609
• [EuiFlexGroup] Responsive mode doesn't respect gutterSize #4140