Styles don't apply to descendants on compoundVariants when using color mode.

[lalmaguerdlg]

Hi! I'm trying to create some button variants with different text colors depending on the color mode. Right now, any styles applied the _text descendant inside the _dark color mode are not being applied, only root styles are.

I wonder if I'm doing something wrong or is this a bug? I am creating a component library by forking @gluestack-ui so I pretty much just customizing their configs.

These is a simplified version of what I'm doing but the issue can be reproduced:

export const Button = createStyle({
  _text: {
    color: '$neutral50',
    fontWeight: '$medium',
    _dark: {
      color: '$textDark0',
    },
  },

  variants: {
    action: {
      merchandising: {
        bg: '$amber500',
        borderColor: '$amber500',
        _text: {
          color: '$neutral900',
        },

        _dark: {
          bg: '$amber500',
          borderColor: '$amber500',
          _text: {
            color: '$neutral900',
          },
        },
      },
    },
    variant: {
      outline: {
        'bg': 'transparent',
        'borderWidth': '$1',
        ':hover': {
          bg: '$cyan500',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: 'transparent',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
      solid: {},
    },
  },
  compoundVariants: [
    {
      action: 'merchandising',
      variant: 'outline',
      value: {
        'bg': 'transparent',
        ':hover': {
          bg: '$amberHover',
        },
        ':active': {
          bg: 'transparent',
        },
        '_text': {
          color: '$neutral900',
        },
        '_dark': {
          'bg': 'transparent', // Root styles are applied properly
          ':hover': {
            bg: '$amberHover',
          },
          ':active': {
            bg: 'transparent',
          },
          '_text': {
            color: '$neutral50', // This style is not being applied
          },
        },
      },
    },
    {
      action: 'merchandising',
      variant: 'solid',
      value: {
        _text: {
          color: '$neutral900',
        },
        _dark: {
          _text: {
            color: '$red200', // This style is not being applied
          },
        },
      },
    },
  ],
});

[lalmaguerdlg]

Never mind! This issue was fixed at the same time as this other issue.

Seems like @gluestack-ui/config has not been updated to use this new version.