theme-ui and Storybook integration

[ghost]

I am attempting to display my components built with theme-ui using Storybook and I am running into a problem with variants as well as the default styles for the components. I am noticing a couple things.

1. The prebuilt components are working with the sx prop, I am able to add the it and update styles and have them display, but if I use a value from my theme, it does not get picked up.
2. The variant prop is also not working.

In this example, I am simply adding the theme provider as a decorator, I have also tried adding it in a lot of other ways, but this seems to be the suggested approach for this. All of my theme values and variants are working correctly in the application.

I am using the most recent versions of Storybook ( 6.4.1 ) and theme-ui ( 0.13.1 ).

Does anyone have any examples of theme-ui working with Storybook?

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button, ThemeProvider } from 'theme-ui';
import { theme } from '../theme';

export default {
  title: 'Example/Button',
  component: Button,
  decorators: [
    (Story) => (
      <ThemeProvider theme={theme}>
        {Story()}
      </ThemeProvider>
    ),
  ],
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button{...args}>Button</Button>;

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  sx: {
    color: '#000',
    backgroundColor: 'exampleColor'
  }
};

Here is a snippet of my theme. These variants all work correctly in the application.

background: "##fff",
    exampleColor: "#7E22CE",
  },
  buttons: {
    primary: {
      backgroundColor: "#7E22CE",
      fontSize: "16px",
    },
    secondary: {
      color: "black",
      backgroundColor: "accent1.500",
      fontSize: "16px",
    },
  },