From 50ad9e1ad5ca74ec0844c84674ec3ff64085f071 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Mon, 22 Feb 2021 18:48:05 -0500
Subject: [PATCH] fix: rray colors handling

---
 ui/components/src/Tag/Tag.stories.tsx | 10 ++++++++++
 ui/components/src/Tag/Tag.tsx         |  8 ++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/components/src/Tag/Tag.stories.tsx b/ui/components/src/Tag/Tag.stories.tsx
index 0954e26b6..d2ff91b4c 100644
--- a/ui/components/src/Tag/Tag.stories.tsx
+++ b/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>
+  );
+};
diff --git a/ui/components/src/Tag/Tag.tsx b/ui/components/src/Tag/Tag.tsx
index e3ccfd547..7f8331fce 100644
--- a/ui/components/src/Tag/Tag.tsx
+++ b/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"