Mode alias color helper function

[rossmoody]

Loving Stitches. This is more of a nascent idea, versus a request or bug.

I like that I can target theme color aliases like how is outlined here but the implementation isn't very elegant when I have to repeat it multiple times in the same file (especially with variants). I've always been a fan of how Chakra handles this with a mode helper function. I mimicked a helper function in my tiny project that works pretty well so I wanted to share it as a consideration for a baked-in utility of some kind. OR, if I am going about this in a subpar way please lemme know so I can fix it up. (I know I could alias these at the theme level but I'm a sucker for keeping my styles next to my components).

Previous

Works fine, but gets unruly fast and I have to import my themes into every component file.

import { lightTheme, darkTheme, styled } from 'stitches.config.js'

export const Button = styled('button', {
  [`.${lightTheme} &`]: {
    backgroundColor: 'white',
    '&:hover': {
      backgroundColor: 'lightgrey',
    },
  },
  [`.${darkTheme} &`]: {
    backgroundColor: 'black',
    '&:hover': {
      backgroundColor: 'lightgrey',
    },
  },
})

Mode function

const mode = (lightMode: string, darkMode: string, property: string) => ({
  [`.${lightTheme} &`]: {
    [`${property}`]: `${lightMode}`,
  },
  [`.${darkTheme} &`]: {
    [`${property}`]: `${darkMode}`,
  },
})

import { mode, styled } from 'stitches.config.js'

const btnBackgroundColor = mode('white', 'black', 'backgroundColor')
const btnBackgroundColorHover = mode('lightgrey', 'darkgrey', 'backgroundColor')

export const Button = styled('button', {
  ...btnBackgroundColor,
  ['&:hover']: btnBackgroundColorHover,
})

[peduarte]

@rossmoody thanks! converted to a discussion, i'll come back to this