Add ability to extend colors in component themes

[ghsteff]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features) - I'm gonna update docs in reablocks-website repo

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

It's not easy to add colors to Buttons, Chips, etc. that aren't already included in the theme without ignoring ts

What is the new behavior?

You can add any color to multiple component themes and pass any color as a prop

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Here's an example of easily adding pink as a Chip color

const customTheme = extendComponentTheme<ChipTheme>(chipTheme, {
  base: `${chipTheme.base} rounded-full`,
  colors: {
    pink: {
      variants: {
        filled: `${chipTheme?.colors?.pink?.variants?.filled} text-panel-content bg-pink-500/10 border-pink-500`
      }
    }
  }
});

export const Simple = () => (
  <DeletableChip
    color="pink"
    theme={customTheme}
    onDelete={() => console.log('on delete')}
  >
    Deletable
  </DeletableChip>
);

[netlify]

✅ Deploy Preview for reablocks-storybook ready!

Name	Link
🔨 Latest commit	ee858f9
🔍 Latest deploy log	https://app.netlify.com/sites/reablocks-storybook/deploys/664dff3df193d10008cd6fd4
😎 Deploy Preview	https://deploy-preview-211--reablocks-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.