[Meta][CSS-in-JS] Switching to emotion #3912
Description
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
emotionkibana#98157) - Initial release of context layer and global theme ([FEATURE] CSS-in-JS via
emotion, initial release #4511) - Add more documentation ([Docs]
EuiThemeProviderglobal 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/reactinsrc/#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 docsNot 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-componentsto Emotion - Deprecate using EUI's SCSS mixins/variables
- Elastic Charts theme as an EuiTheme
Needs discussion
- Remove use of
ghostandinkin favor ofEuiThemeProvider+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.
- For context, the deprecation of