use tamagui functional variants for Tag color (#453)

* use tamagui fn variant

* rm get-custom-styles.ts

* assert type

* add changeset

* add customisations colors

* u

* Update tag.tsx

Co-authored-by: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>

.changeset/cold-feet-boil.md

@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+use tamagui functional variants for Tag color

packages/components/src/tag/get-custom-styles.ts

@@ -1,64 +0,0 @@
-import { getColorWithOpacity } from '../../utils/get-color-with-opacity'
-import { tokens } from '../tokens'
-
-import type { TagProps } from './tag'
-import type { ColorTokens, StackStyleProps } from '@tamagui/core'
-
-// TypeGuard for ColorTokens
-function isColorTokens(
-  value: `#${string}` | ColorTokens
-): value is ColorTokens {
-  return typeof value === 'string' && value.startsWith('$')
-}
-
-/**
- * Gets the styles for the custom tag
- * @param props - the props of the tag
- * @returns the styles for the custom tag or null if no color is provided
- **/
-const getCustomStyles = (props: TagProps): StackStyleProps | null => {
-  const { color: colorFromProps, icon } = props
-
-  if (!colorFromProps) {
-    return null
-  }
-
-  let color: ColorTokens | string = colorFromProps
-
-  if (isColorTokens(colorFromProps)) {
-    const colorToken = colorFromProps.replace(
-      '$',
-      ''
-    ) as keyof typeof tokens.color
-    color = tokens.color[colorToken]?.val || colorFromProps
-  }
-
-  if (icon) {
-    return {
-      borderColor: getColorWithOpacity(color!, 0.2),
-      backgroundColor: getColorWithOpacity(color!, 0.1),
-      pressStyle: {
-        backgroundColor: getColorWithOpacity(color, 0.2),
-        borderColor: getColorWithOpacity(color, 0.3),
-      },
-      hoverStyle: {
-        backgroundColor: getColorWithOpacity(color, 0.2),
-        borderColor: getColorWithOpacity(color, 0.3),
-      },
-    }
-  }
-
-  return {
-    borderColor: getColorWithOpacity(color, 0.2),
-    pressStyle: {
-      borderColor: getColorWithOpacity(color, 0.3),
-      backgroundColor: getColorWithOpacity(color, 0.1),
-    },
-    hoverStyle: {
-      borderColor: getColorWithOpacity(color, 0.3),
-      backgroundColor: getColorWithOpacity(color, 0.1),
-    },
-  }
-}
-
-export { getCustomStyles }

packages/components/src/tag/tag.tsx

@@ -3,8 +3,8 @@ import { createElement } from 'react'
 import { styled } from '@tamagui/core'
 import { View } from 'react-native'
 
+import { getColorWithOpacity } from '../../utils/get-color-with-opacity'
 import { Text } from '../text'
-import { getCustomStyles } from './get-custom-styles'
 
 import type { TextProps } from '../text'
 import type { IconProps } from '@status-im/icons'
@@ -56,7 +56,7 @@ const Tag = (props: Props) => {
       selected={selected}
       disabled={disabled}
       iconOnly={Boolean(icon && !label)}
-      {...getCustomStyles(props)}
+      variant={color}
       {...(onPress && {
         role: 'button',
         onPress,
@@ -100,6 +100,24 @@ const Base = styled(View, {
   },
 
   variants: {
+    variant: (token: ColorTokens | string, { tokens }) => {
+      const color = tokens.colors[token as keyof typeof tokens.colors]
+        ? tokens.colors[token as keyof typeof tokens.colors].val
+        : token
+
+      return {
+        borderColor: getColorWithOpacity(color, 0.2),
+        pressStyle: {
+          borderColor: getColorWithOpacity(color, 0.3),
+          backgroundColor: getColorWithOpacity(color, 0.1),
+        },
+        hoverStyle: {
+          borderColor: getColorWithOpacity(color, 0.3),
+          backgroundColor: getColorWithOpacity(color, 0.1),
+        },
+      }
+    },
+
     size: {
       32: {
         height: 32,

packages/components/src/tokens.ts

@@ -1,8 +1,10 @@
+import { customisation } from '@status-im/colors'
 import { createTokens } from '@tamagui/core'
 import { size, space, zIndex } from '@tamagui/theme-base'
 
 export const tokens = createTokens({
   color: {
+    ...customisation,
     'neutral-5': 'hsla(220, 18%, 97%, 1)',
     'neutral-10': 'hsla(216, 20%, 95%, 1)',
     'neutral-20': 'hsla(214, 17%, 92%, 1)',

packages/components/utils/get-color-with-opacity.ts

@@ -10,7 +10,7 @@ function getColorWithOpacity(color: string, opacity: number): string {
   const clampedOpacity = Math.max(0, Math.min(1, opacity)) * 100
 
   // Construct the color string with opacity using CSS color-mix function
-  const newColor = `color-mix(in srgb, ${color} ${clampedOpacity}%, transparent);`
+  const newColor = `color-mix(in srgb, ${color} ${clampedOpacity}%, transparent)`
 
   return newColor
 }

packages/icons/svgr.config.js

@@ -44,6 +44,7 @@ module.exports = {
     '#09101C': '{props.color}',
     '#000': '{props.color}',
     '#0D1625': '{props.color}',
+    '#647084': '{props.color}',
   },
   filenameCase: 'kebab',
   template,