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>
project44 · Jan 6, 2025 · 49c18bf · 49c18bf
1 parent dfc5776
commit 49c18bf
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/purple-pigs-cheat.md 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
@@ -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
@@ -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.
    */