From 15b146fab62010810809ecbe78256713251daaa1 Mon Sep 17 00:00:00 2001 From: Felicio Mununga Date: Sun, 2 Jul 2023 22:57:40 +0100 Subject: [PATCH] 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 | 5 ++ .../components/src/tag/get-custom-styles.ts | 64 ------------------- packages/components/src/tag/tag.tsx | 22 ++++++- packages/components/src/tokens.ts | 2 + .../utils/get-color-with-opacity.ts | 2 +- packages/icons/svgr.config.js | 1 + 6 files changed, 29 insertions(+), 67 deletions(-) create mode 100644 .changeset/cold-feet-boil.md delete mode 100644 packages/components/src/tag/get-custom-styles.ts diff --git a/.changeset/cold-feet-boil.md b/.changeset/cold-feet-boil.md new file mode 100644 index 00000000..2fee9292 --- /dev/null +++ b/.changeset/cold-feet-boil.md @@ -0,0 +1,5 @@ +--- +'@status-im/components': patch +--- + +use tamagui functional variants for Tag color diff --git a/packages/components/src/tag/get-custom-styles.ts b/packages/components/src/tag/get-custom-styles.ts deleted file mode 100644 index 1e2c31a1..00000000 --- a/packages/components/src/tag/get-custom-styles.ts +++ /dev/null @@ -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 } diff --git a/packages/components/src/tag/tag.tsx b/packages/components/src/tag/tag.tsx index e79bee56..ca14f990 100644 --- a/packages/components/src/tag/tag.tsx +++ b/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, diff --git a/packages/components/src/tokens.ts b/packages/components/src/tokens.ts index d8e95cb8..e60923b0 100644 --- a/packages/components/src/tokens.ts +++ b/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)', diff --git a/packages/components/utils/get-color-with-opacity.ts b/packages/components/utils/get-color-with-opacity.ts index 54c1688c..834cf193 100644 --- a/packages/components/utils/get-color-with-opacity.ts +++ b/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 } diff --git a/packages/icons/svgr.config.js b/packages/icons/svgr.config.js index 000adc5e..4290520d 100644 --- a/packages/icons/svgr.config.js +++ b/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,