`transformers` middleware for theme values

In our custom theme implementation on our team at work, we used functions to get tokens. for example:

<div
  css={theme => ({
    color: theme.color('red')
  })}
>
  This is our token red
</div>

This enabled us to do some cool things, for example, to use https://github.com/VinSpee/alpha-string-to-rgba so we could do this:

<div
  css={theme => ({
    color: theme.color('red.5')
  })}
>
  This is our token red, transformed to 50% opacity by `aRGB`.
</div>

Maybe the API could look like something like this (just spitballing here):

const theme = {
  colors: {
    red: '#E62A1E'
  },
  transformers: {
    colors: currentTheme => val => aRGB(currentTheme.colors)(val),
  },
};

any thoughts on something like this? It’s like a middleware for tokens. It could (optionally, and simply) open up a lot of possibilities.

[hennessyevan]

For anyone else coming here wanting to stick to theme-ui’s API but want to change some of the ways theme data is stored you can use a Proxy

For example, my theme operates on a base-8 scale. So if I want spacing to act like <Box margin={3}/> to give me { margin: 24px; } I can set a Proxy for the space prop.

const theme = {
  space: new Proxy([], {
    get: (_, num) => num * 8,
  }),
}

Note Be aware of the support for Proxy: https://caniuse.com/#search=proxy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

[jxnblk]

Going to close this out, since I think @johno covered some of the rationale with how we’re approaching theming here