Merge pull request #95 from abusix/ahq2-46-hailstorm-add-purple-color…

…-for-badges feat(components): adjust badge colors
abusix · Jan 22, 2024 · 935caef · 935caef
2 parents 201328a + 892e772
commit 935caef
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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" },
+            });
         }),
     ],
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ const types: BadgeProps["type"][] = [ @@
         "orange",
         "pink",
         "red",
+        "purple",
     ];
     const shapes: BadgeProps["shape"][] = ["default", "rounded"];
@@ Expand Down @@