Will EUI theme be compatible with the theme specification used in theme-ui and styled system?

[cchaos]

Will EUI theme be compatible with the theme specification used in theme-ui and styled system?

Originally posted by @lightwave in #3912 (comment)

[cchaos]

We aren't explicitly building our themes to be compatible, but from the looks at that documentation, it's just a way to store your own theme tokens to then provide it to the UI library of your choice. Our tokens will be specifically designed to how we use them in our components. We're continuing to build out the docs but you can start taking a look at what our JSON theming object looks like here: https://elastic.github.io/eui/#/theming/global-values

[cchaos]

You're correct that theme-ui uses its own token, but there are name conflict since both eui and theme-ui uses the underlying emotion theme provider. theme-ui expects the breakpoints attribute to be an array while eui expects the breakpoints in the theme object to be an object. After eui inject its theme object into emotion, it broke the processing in theme-ui where it expects it to be an array.

Originally posted by @lightwave in #3912 (comment)

[cchaos]

@lightwave It sounds like you just need to do some manipulation to the object before passing it in to theme-ui. Sorry if this creates an extra step, but we're building the theme to EUI's specific needs.

[lightwave]

I wish I could just manipulate the theme object before passing in to the provider, but it won't work that way. theme-ui reads the same theme object inside the emotion theme context. The following code is from theme-ui reading the breakpoints attribute from the theme. Because theme.breakpoints is set as an object in eui, that code barfed right there in the map method call. In short, any libraries out there that adheres to the theme specification would not work with elastic ui. This will make it impossible to transition to elastic ui from those libraries. An example would be rebass and reflexbox

Note that the only time this conflicts with each other is when elastic ui components are mixed with other components with the same theme provider up in the component tree and when EuiThemeProvider is nested within theme-ui's ThemeProvider like the following:

<ThemeProvider theme={themeUITheme}>
  <EuiThemeProvider>
    <App/>
  </EuiThemeProvider>
</ThemeProvider>

Would it be possible to give the eui theme attributes an eui prefix? i.e., euiBreakpoints instead of breakpoints?

    const breakpoints =
      (theme && (theme.breakpoints as string[])) || defaultBreakpoints
    const mediaQueries = [
      null,
      ...breakpoints.map((n) =>
        n.includes('@media') ? n : `@media screen and (min-width: ${n})`
      ),
    ]

https://github.com/system-ui/theme-ui/blob/8d80c4ea7139173872993faf096f322bd822742f/packages/css/src/index.ts#L313