fix: rray colors handling

ui/components/src/Tag/Tag.stories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Document, Example, ControlTypes } from '@component-controls/core';
+import { tailwind } from '@theme-ui/presets';
+import { ThemeProvider } from '../ThemeContext/ThemeContext';
 import { Tag, TagProps } from './Tag';
 
 export default {
@@ -15,3 +17,11 @@ export const overview: Example<TagProps> = ({ color }) => {
 overview.controls = {
   color: { type: ControlTypes.COLOR, value: 'red' },
 };
+
+export const twilwindArrayColors: Example<TagProps> = () => {
+  return (
+    <ThemeProvider theme={tailwind as any}>
+      <Tag color="red">some text</Tag>
+    </ThemeProvider>
+  );
+};

ui/components/src/Tag/Tag.tsx

@@ -31,20 +31,24 @@ export interface TagProps {
   raw?: string;
 }
 
+const defColor = 'white';
 /**
  * A container component to display text in a colored box, with a semi-transparent background.
  */
 export const Tag: FC<TagProps & Omit<BoxProps, 'variant'>> = ({
   children,
   raw,
-  color = 'white',
+  color = defColor,
   borderSize = 2,
   transparentAmount = 0.85,
   variant,
   ...rest
 }) => {
   const theme = useTheme() as Theme;
-  const resolvedColor = getColor(theme, color);
+  let resolvedColor = getColor(theme, color);
+  if (typeof resolvedColor !== 'string') {
+    resolvedColor = defColor;
+  }
   return (
     <Box
       as="span"