feat: Add more variants to button and badge.

itsrakeshhq · Sep 20, 2023 · e70442f · e70442f
1 parent 7a435d7
commit e70442f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/.changeset/strong-lamps-fail.md b/.changeset/strong-lamps-fail.md
@@ -0,0 +1,5 @@
+---
+"@itsrakesh/ui": minor
+---
+
+Added more variants to button and badge.
diff --git a/packages/ui/src/components/Badge/Badge.tsx b/packages/ui/src/components/Badge/Badge.tsx
@@ -3,16 +3,21 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@itsrakesh/utils";
 
 const badgeVariants = cva(
- "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-bold transition-colors uppercase focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
  variants: {
  variant: {
  default:
- "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+ "border-transparent bg-primary text-primary-foreground shadow hover:opacity-80",
  secondary:
- "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ "border-transparent bg-secondary text-secondary-foreground hover:opacity-80",
+ success:
+ "border-transparent bg-success text-success-foreground shadow hover:opacity-80",
+ warning:
+ "border-transparent bg-warning text-warning-foreground shadow hover:opacity-80",
+ info: "border-transparent bg-info text-info-foreground shadow hover:opacity-80",
  destructive:
- "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+ "border-transparent bg-destructive text-destructive-foreground shadow hover:opacity-80",
  outline: "text-foreground",
  },
  },

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
@@ -9,14 +9,16 @@ const buttonVariants = cva(
  {
  variants: {
  variant: {
- default:
- "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ default: "bg-primary text-primary-foreground shadow hover:opacity-80",
+ success: "bg-success text-success-foreground shadow hover:opacity-80",
+ warning: "bg-warning text-warning-foreground shadow hover:opacity-80",
+ info: "bg-info text-info-foreground shadow hover:opacity-80",
  destructive:
- "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ "bg-destructive text-destructive-foreground shadow-sm hover:opacity-80",
  outline:
  "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
  secondary:
- "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ "bg-secondary text-secondary-foreground shadow-sm hover:opacity-80",
  ghost: "hover:bg-accent hover:text-accent-foreground",
  link: "text-primary underline-offset-4 hover:underline",
  },

diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
@@ -31,7 +31,7 @@
  --destructive: 12, 91%, 46%;
  --destructive-foreground: 210 40% 98%;
 
- --success: 160, 100%, 26%;
+ --success: 116, 46%, 49%;
  --success-foreground: 210 40% 98%;
 
  --warning: 33, 100%, 56%;