Theme-ui: Custom css to theme key mappings

[cour64]

It would be nice to manually define css style props to theme keys/scales mappings.

Say for instance I wanted to map the outline css prop the the border scale, or perhaps a custom outline scale then I could do something like this in my theme object:

const myTheme = {
  bloop: {
    error: '1px solid tomato',
    success: '1px solid springgreen',
    info: '1px solid skyblue'
  },
  // customise theme spec here
  customSpec: {
    //  define in the form 'css style prop': 'theme key'
    'outline': 'bloop',
    // overwrite mappings
    'border': 'bloop'
  }
}

This would then work in the sx prop like so:

sx={{ outline: 'error' }}

Of course I could use functional values but it can be come a bit cumbersome.

I am suggesting this since I have many outline: theme => theme.borders.outline in my code but perhaps there are other cases where it could be useful, maybe opacities or transitions? I'm happy to submit a PR for this if need be.

[jxnblk]

Why not define the object for borders and outlines before the theme object and pass it to both keys?

[cour64]

Do you mean like this:

const bordersAndOutlines = {
    error: '1px solid tomato',
    success: '1px solid springgreen',
    info: '1px solid skyblue'
}

const myTheme = {
  borders: bordersAndOutlines,
  outlines: bordersAndOutlines
}

If so then yeah I could do that but I would still have a whole bunch of outline: theme => theme.outlines.error around.

What I'm trying to get at is making the theme spec customisable. So I can change what css style props get mapped to what theme scales/keys or add custom mappings. For example for a lot of my components I have this rule

transition: 'all 250ms ease 0s'

but it would be really useful if I could add a theme mapping along the lines of:

const myTheme = {
  transitions: {
    base: 'all 250ms ease 0s',   
  },
  customSpec: {
    transition: 'transitions'
  }
}

and then use it

sx={{ transition: 'base' }}

I guess this might be going out of the scope of what role the theme should serve and potentially allow for misuse but still it would be really cool :)

[jonavila]

@cour64 Any downside with using variants?

const myTheme = {
    transitions: {
        base: {
            transition: 'all 250ms ease 0s'
        }
    }
}

and then

sx={{ variant: 'transitions.base' }}

[cour64]

@jonavila variants could work as a workaround. They would need to be mergeable as I would not be able to use them if I already have a variant defined on the component.

I still think making it possible to alter the theme spec would be really powerful. I could do things like make the width and height style props map to different theme scales e.g.

const myTheme = {
  widths: [4, 8, 16, '10%', '20%'],
  heights: {
    full: '100%',
    half: '50%'  
  },
  spec: {
    width: 'widths',
    height: 'heights' 
  }
}

I know my examples are a bit contrived but the idea is there.

[jxnblk]

While we do not plan on making the sx prop customizable, properties like transition and outline could (should probably) be added to the implementation

[cour64]

Fair enough, I will close this issue to remove clutter.

I was mainly suggesting this for the case of transitions and outlines anyway, once the typescript conversion is done I might add a PR for those