fix: sentiment style map

Author: lisalupi

packages/ui/src/components/Tag/index.tsx

@@ -4,24 +4,27 @@ import { CloseIcon } from '@ultraviolet/icons'
 import type { MouseEventHandler, ReactNode } from 'react'
 import { useMemo } from 'react'
 import useClipboard from 'react-use-clipboard'
+import type { Color } from '../../theme'
 import { Button } from '../Button'
 import { Loader } from '../Loader'
 import { Text } from '../Text'
 import { Tooltip } from '../Tooltip'
-import type { TagVariants } from './styles.css'
 import { closeButtonTag, containerTag, textTag } from './styles.css'
 
 const COPY_DURATION = 2500
 
 type TagProps = {
   isLoading?: boolean
   onClose?: MouseEventHandler<HTMLButtonElement>
+  sentiment?: Color
+  disabled?: boolean
+  copiable?: boolean
   copyText?: string
   copiedText?: string
   className?: string
   children: ReactNode
   'data-testid'?: string
-} & TagVariants
+}
 
 type TagInnerProps = Omit<
   TagProps,

packages/ui/src/components/Tag/styles.css.ts

@@ -1,7 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import type { RecipeVariants } from '@vanilla-extract/recipes'
 import { recipe } from '@vanilla-extract/recipes'
-import type { Color } from '../../theme'
 import { style } from '@vanilla-extract/css'
 
 const SENTIMENTS = [
@@ -12,15 +10,8 @@ const SENTIMENTS = [
   'secondary',
   'success',
   'warning',
-] as Color[]
+] as const
 
-function getSentimentStyle(sentiment: (typeof SENTIMENTS)[number]) {
-  return {
-    color: theme.colors[sentiment].text,
-    background: theme.colors[sentiment].background,
-    border: `solid 1px ${sentiment === 'neutral' ? theme.colors.neutral.border : theme.colors[sentiment].background}`,
-  }
-}
 export const containerTag = recipe({
   base: {
     display: 'inline-flex',
@@ -49,16 +40,16 @@ export const containerTag = recipe({
       },
     },
 
-    sentiment: {
-      danger: getSentimentStyle('danger'),
-      info: getSentimentStyle('info'),
-      neutral: getSentimentStyle('neutral'),
-      primary: getSentimentStyle('primary'),
-      secondary: getSentimentStyle('secondary'),
-      success: getSentimentStyle('success'),
-      warning: getSentimentStyle('warning'),
-    },
-
+    sentiment: Object.fromEntries(
+      SENTIMENTS.map(sentiment => [
+        sentiment,
+        {
+          color: theme.colors[sentiment].text,
+          background: theme.colors[sentiment].background,
+          border: `solid 1px ${sentiment === 'neutral' ? theme.colors.neutral.border : theme.colors[sentiment].background}`,
+        },
+      ]),
+    ),
     disabled: {
       true: {
         color: theme.colors.neutral.textDisabled,
@@ -84,5 +75,3 @@ export const closeButtonTag = style({
   height: 'fit-content',
   padding: theme.space['0.25'],
 })
-
-export type TagVariants = NonNullable<RecipeVariants<typeof containerTag>>