From 49c18bf4aaa60040e5f0704147a011a11aa78265 Mon Sep 17 00:00:00 2001
From: Vivek Jain <147403156+vivek-p44@users.noreply.github.com>
Date: Mon, 6 Jan 2025 22:34:15 +0530
Subject: [PATCH] feat: Made changes to add pink variant for pill (#569)

* ACTINSTS-2399: Made changes to add pink variant for pill

* ACTINSTS-2399: Added changeset

* ACTINSTS-2399: fixed linting

---------

Co-authored-by: Vivek Jain <vivekjain@p44-vjain2.local>
---
 .changeset/purple-pigs-cheat.md                   |  5 +++++
 packages/react/src/components/Pill/Pill.styles.ts | 11 +++++++++++
 packages/react/src/components/Pill/Pill.tsx       |  2 +-
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/purple-pigs-cheat.md

diff --git a/.changeset/purple-pigs-cheat.md b/.changeset/purple-pigs-cheat.md
new file mode 100644
index 00000000..aeaf8443
--- /dev/null
+++ b/.changeset/purple-pigs-cheat.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': minor
+---
+
+Made change to pink variant for pill
diff --git a/packages/react/src/components/Pill/Pill.styles.ts b/packages/react/src/components/Pill/Pill.styles.ts
index 471cb35b..0925834b 100644
--- a/packages/react/src/components/Pill/Pill.styles.ts
+++ b/packages/react/src/components/Pill/Pill.styles.ts
@@ -79,6 +79,17 @@ export const useStyles = css({
           backgroundColor: '$colors$palette-grey-700',
         },
       },
+      pink: {
+        $$backgroundColor: '$colors$palette-pink-50',
+
+        '.manifest-pill__text': {
+          color: '$palette-red-600',
+        },
+
+        '.manifest-pill__icon': {
+          backgroundColor: '$palette-red-600',
+        },
+      },
     },
     isCollapsible: {
       true: {
diff --git a/packages/react/src/components/Pill/Pill.tsx b/packages/react/src/components/Pill/Pill.tsx
index 49ec56e8..3f14f575 100644
--- a/packages/react/src/components/Pill/Pill.tsx
+++ b/packages/react/src/components/Pill/Pill.tsx
@@ -17,7 +17,7 @@ export interface PillOptions<T extends As = PillElement> extends Options<T>, Sty
    *
    * @default 'indigo'
    */
-  colorScheme?: 'grey' | 'indigo' | 'red' | 'yellow';
+  colorScheme?: 'grey' | 'indigo' | 'pink' | 'red' | 'yellow';
   /**
    * The icon to render in the pill.
    */