title: Chakra UI colorScheme prop on button
body: <p><strong>i extended the theme provider in chakra_ui</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { ChakraProvider, extendTheme } from &quot;@chakra-ui/react&quot;;
  
  import App from &quot;./App&quot;;
  
  const theme = extendTheme({
    colors: {
      brand: {
        50: &quot;#44337A&quot;,
        100: &quot;#B794F4&quot;
      }
    }
  });
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;ChakraProvider theme={theme}&gt;
        &lt;App /&gt;
      &lt;/ChakraProvider&gt;
    &lt;/React.StrictMode&gt;,
    rootElement
  );
  </code></pre>
  <p>I used the Button Component like and set the colorScheme prop to the value my theme has:</p>
  <pre><code> &lt;Button size=&quot;sm&quot; colorScheme=&quot;brand.100&quot;&gt;
      Click Me
    &lt;/Button&gt;
  </code></pre>
  <p>it produced the following in css: <code>background: brand.50.500;</code>. so it does not apply the color, any problem??</p>
  <p>i noticed something, without the <code>.number</code>: e.g .50 or .100... the brand does not work, but other inbuilt colors work.</p>
  <p><a href="https://codesandbox.io/s/infallible-allen-1k0tx?file=/src/App.js:257-333" rel="noreferrer">https://codesandbox.io/s/infallible-allen-1k0tx?file=/src/App.js:257-333</a></p>