[gatsby-plugin-theme-ui] How do you properly merge conflicting theme tokens?

[daydream05]

Description

I made a gatsby theme that uses the base theme presets and extends it a bit. When used on a parent theme that used a totally different set of design tokens, it breaks.

import childTheme from ‘child-theme/src/gatsby-plugin-theme-ui’
import merge from ‘lodash.merge’

const baseTheme

export default merge({}, childTheme, baseTheme)

For example, my child theme has a fontSize array of 7 items and my base theme has only 6. With the method above, my child theme breaks if it uses the last index and turns it into pixel since it doesn’t exist any more.

How would i go about designing/merging it in a way that my theme becomes portable?

Thanks

[jxnblk]

Thanks! This is definitely an issue we're aware of, but don't have solid patterns around yet. I've posted this related RFC to the theme specification, which would mean that each array would have a fixed length: system-ui/theme-specification#5 – with something like this we could provide validation around which themes use array scales in the "blessed" way.

For now, I'd say try to keep your themes to a similar schema if you intend for them to be used together. There are also different array merging strategies you can leverage with libraries like deepmerge

[jxnblk]

Closing this since I don't think there are any clear actionable next steps here