Is there a way for variants to inherit properties from default style?

[jack1913]

Look at this example:

forms: {
    input: {
      color: 'primary',
      px: 3,
      py: 3,
      roundedTop: {
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
      },
      roundedBottom: {
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
      },
    },
  },

I have defined the default styles, there is a radii: 12px, and with variants I would like to modify the default values to nullify the radius as needed.

I have looked over the docs but did not find anything. :/

[howard86]

As Rebass is based on styled-system
I have found this in the doc which may be helpful.

An example I am currently using is

const theme = {
  colors: {
    primary: "",
    secondary: "",
    terraCotta: ["#E07A5F", "#43190D", "..."],
  },

theme.colors.primary = theme.colors.terraCotta[0];
theme.colors.secondary = theme.colors.terraCotta[1];

(I need to declare the primary & secondary for TypeScript)

so as for your usage, I guess it would be something similar to the following...

theme.forms.input.[your_choice] = {
    [some_options_to_do_with_border_radius]: theme.radii
}