Support color control

[odanado]

Storybook's preview.ts is set as follows.

import {
  setCustomElementsManifest,
  type Preview,
} from "@storybook/web-components";

import customElements from "/path/to/custom-elements.json";

setCustomElementsManifest(customElements);

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
        text: /label$/i,
      },
    },
  },
};

export default preview;

I define the following MyButton custom element.

@customElement('my-button')
export class MyButton extends LitElement {
  @property({type: String})
  color: string = "blue";
}

In this case, the value of argTypes.color.control is text.

const { argTypes } = getWcStorybookHelpers("my-button");

argTypes.color.control // => 'text'

The expected behavior is that the value of control should be color since mathcers is defined in preview.ts.

[break-stuff]

I will see if there is a way to tap into that config when building the stories.