💄 Allow custom colors in Tag's content (#1283)

Author: arkadiy93

src/molecules/Tag/Tag.stories.tsx

@@ -57,6 +57,14 @@ const meta: Meta<typeof Tag> = {
         edit,
       },
     },
+    iconColor: {
+      control: 'color',
+      type: 'string',
+    },
+    textColor: {
+      control: 'color',
+      type: 'string',
+    },
   },
   args: {
     color: 'purple',
@@ -104,6 +112,16 @@ export const Colors: Story = {
   ),
 };
 
+export const CustomTextAndIconColors: Story = {
+  args: {
+    leadingIcon: code,
+    color: 'pink',
+    children: 'Developer',
+    textColor: '#265c36',
+    iconColor: '#33C1FF',
+  },
+};
+
 export const LeadingIcon: Story = {
   tags: ['test-only'],
   args: {

src/molecules/Tag/Tag.tsx

@@ -10,6 +10,8 @@ import styled from 'styled-components';
 
 interface ContainerProps {
   $color: NonNullable<TagProps['color']>;
+  $iconColor?: string;
+  $textColor?: string;
 }
 
 const Container = styled.div<ContainerProps>`
@@ -21,11 +23,11 @@ const Container = styled.div<ContainerProps>`
   background: ${({ $color }) => TAG_COLORS[$color].background};
   min-height: 24px;
   > span {
-    color: ${({ $color }) => TAG_COLORS[$color].text};
+    color: ${({ $color, $textColor }) => $textColor ?? TAG_COLORS[$color].text};
     line-height: normal;
   }
   > svg {
-    fill: ${({ $color }) => TAG_COLORS[$color].text};
+    fill: ${({ $color, $iconColor }) => $iconColor ?? TAG_COLORS[$color].text};
   }
 `;
 
@@ -41,6 +43,8 @@ export interface TagProps {
     | 'grey';
   leadingIcon?: IconData;
   trailingIcon?: IconData;
+  iconColor?: string;
+  textColor?: string;
   children: string;
 }
 
@@ -49,9 +53,11 @@ export const Tag: FC<TagProps> = ({
   color = 'blue',
   leadingIcon,
   trailingIcon,
+  textColor,
+  iconColor,
 }) => {
   return (
-    <Container $color={color}>
+    <Container $color={color} $iconColor={iconColor} $textColor={textColor}>
       {leadingIcon && <Icon data={leadingIcon} size={16} />}
       <Typography variant="cell_text" group="table" as="span">
         {children}