Button with outline variant does not respect colorScheme property

[mattcoker]

Button

• URL for category: https://pro.chakra-ui.com/components/application/form-elements
• Component name: Radio button group

When using the Chakra UI Pro theme, specifically the outline variant of a Button, does not respect To Reproduce Steps to reproduce the behavior:

1. Create a new app utilizing the base Chakra UI Pro theme
2. Render the following markup:

<Button variant={"outline"} colorScheme={"red"}>
  I should have a red outline
</Button>

Expected behavior Button should have a red outline, and a very light red fill color

Screenshots Below: Screenshot of the actual behavior, when only extending the Pro theme

Below: Screenshot of the expected behavior, which was replicated by calling extendTheme({}) with no customizations

Browser/Device (if applicable)

- @chakra-ui/core:          0.8.0
- @chakra-ui/pro-theme:     0.0.37
- @chakra-ui/react:         1.8.8
- @chakra-ui/styled-system  1.19.0
- MacOS (not relevant)
- Brave/Chrome (not relevant)

Additional context I first noticed this when trying to utilize the Chakra Pro RadioButtonGroup component.

[mattcoker]

Its worth noting I was able to fix this temporarily with the following theme override:

// custom-theme/components/button.ts
import { theme } from "@chakra-ui/react";

const variants = {
  outline: theme.components.Button.variants.outline,
};

export default { variants };