From 892e772ad172e3764090386f4576e2f0bc054e5c Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Mon, 22 Jan 2024 13:30:43 +0100
Subject: [PATCH] feat(components): adjust badge colors

---
 src/components/badge/badge.stories.tsx |  1 +
 src/components/badge/badge.tsx         |  3 ++-
 tailwind.config.cjs                    | 31 ++++++++++++++------------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/badge/badge.stories.tsx b/src/components/badge/badge.stories.tsx
index 3b1740f7..2d99f428 100644
--- a/src/components/badge/badge.stories.tsx
+++ b/src/components/badge/badge.stories.tsx
@@ -14,6 +14,7 @@ const types: BadgeProps["type"][] = [
     "orange",
     "pink",
     "red",
+    "purple",
 ];
 const shapes: BadgeProps["shape"][] = ["default", "rounded"];
 
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index d2ce68e6..8b762ec1 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -4,13 +4,14 @@ import { classNames } from "../../util/class-names";
 const buttonVariants = {
     primary: "bg-primary-100 text-primary-500",
     violet: "bg-violet-100 text-violet-800",
-    green: "bg-success-200 text-success-600",
+    green: "bg-success-100 text-success-600",
     neutral: "bg-neutral-200 text-neutral-800",
     yellow: "bg-warning-100 text-warning-600",
     teal: "bg-teal-100 text-teal-800",
     orange: "bg-orange-100 text-orange-800",
     pink: "bg-pink-300 text-pink-800",
     red: "bg-danger-100 text-danger-600",
+    purple: "bg-purple-100 text-purple-800",
 };
 
 const shapeVariants = {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ab4b5a79..fcaf06fb 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -23,9 +23,9 @@ export default {
                 0: "#ffffff",
             },
             primary: {
-                "900+20": '#1A276C',
-                "900+10": '#1E2C7A',
-                "900+8": '#1E2D7C',
+                "900+20": "#1A276C",
+                "900+10": "#1E2C7A",
+                "900+8": "#1E2D7C",
                 900: "#213187",
                 800: "#2235AB",
                 700: "#223FD3",
@@ -36,7 +36,6 @@ export default {
                 200: "#C1D5FC",
                 100: "#DCE7FD",
                 50: "#EFF4FF",
-
             },
             success: {
                 900: "#114335",
@@ -80,15 +79,19 @@ export default {
             },
             teal: {
                 100: "#ccfbf1",
-                800: "#115e59"
+                800: "#115e59",
             },
             orange: {
                 100: "#ffedd5",
-                800: "#9a3412"
+                800: "#9a3412",
             },
             pink: {
                 300: "#f9a8d4",
-                800: "#9d174d"
+                800: "#9d174d",
+            },
+            purple: {
+                100: "#D8D4FF",
+                800: "#8966FF",
             },
             black: "#000000",
             "modal-background": "rgba(67, 90, 111, 0.7)",
@@ -116,14 +119,14 @@ export default {
     },
     plugins: [
         require("@headlessui/tailwindcss"),
-        require('@tailwindcss/forms'),
-        plugin(function ({addBase}) {
+        require("@tailwindcss/forms"),
+        plugin(function ({ addBase }) {
             addBase({
-                "[type='search']::-webkit-search-decoration": {display: "none"},
-                "[type='search']::-webkit-search-cancel-button": {display: "none"},
-                "[type='search']::-webkit-search-results-button": {display: "none"},
-                "[type='search']::-webkit-search-results-decoration": {display: "none"},
-            })
+                "[type='search']::-webkit-search-decoration": { display: "none" },
+                "[type='search']::-webkit-search-cancel-button": { display: "none" },
+                "[type='search']::-webkit-search-results-button": { display: "none" },
+                "[type='search']::-webkit-search-results-decoration": { display: "none" },
+            });
         }),
     ],
 };