Any way to use an object lookup rather than CSS Vars?

[lifeiscontent]

I'd like to use stitches, but one of the goals of a UI kit I'm creating is to have IE11 support. Is there any way to do theming without CSS Vars within Stitches?

[lifeiscontent]

@jonathantneal any guidance here would be much appreciated!

[jonathantneal]

Stitches can generate IE11 compatible CSS. However, Stitches itself is not compatible with IE11.

Therefore, I’m unsure how helpful this will be for you, but here you are — you may reference the original value from tokens like so:

const { styled, theme } = createCss({
  colors: {
    red: "#ff6347"
  }
})

/* then, later... */

styled('button', {
  // this will use the original value, and not the custom property
  color: theme.colors.red.value
})

[lifeiscontent]

@jonathantneal hmm the theme and styled interface seem highly coupled together, how would someone be able to pass in another theme not created by me (UI kit author)? Also, what is stopping stitches from having IE11 support?

[peduarte]

You can try the suggestion from Jonathan, aside from that, IE11 support isnt part of the Stitches scope, sorry 🙁