Is it possible to use color variables with gradients when specifying the theme

[KostasKgr]

Hello,

We are trying to define some button variants in the base theme, which are using the colors defined in the theme. Different customers will have different colors, so we want to avoid duplicating the color values. Also our UI/UX team is using a lot of gradients so looking for a sustainable solution.

It seems that we cannot use gradients with references to colors.

I tried reproducing it here, so that it is easier to demonstrate: https://rebassjs.org/theming#demo

Replace the contents with:

<ThemeProvider
  theme={{
    colors: {
      background: 'black',
      secondary: '#F3801A',
      secondaryDark: '#FF3614',

    },
    space: [ 0, 6, 12, 24, 48 ],
    fontSizes: [ 14, 16, 18, 20, 24 ],
    buttons: {
      secondary: {
        // This works but the colors are hardcoded
        //background: 'linear-gradient(90deg, #FF3614 0%, #F3801A 100%)',
        // Does not work
        background: 'linear-gradient(90deg, secondaryDark 0%, secondary 100%)', 
      }
    }
}}>
    <Button variant='secondary'>Beep</Button>
</ThemeProvider>

[adnicolae]

Hello @KostasKgr,

The way I got around this was to use interpolation inside theme.js.
My setup is similar to this:

export const colors = {
  background: 'black',
  secondary: '#F3801A',
  secondaryDark: '#FF3614'
}

export const buttons = {
  primary: {
    background: `linear-gradient(90deg, ${colors.secondaryDark} 0%, ${colors.secondary]} 100%)`
  }
}

export default {
  lightTheme: {
    colors,
    buttons
  }
}

I tested this with rebass and was able to successfully render the linear-gradient.

Hope this helps.