From 5abceb7bc7e29a8ac722e26d76ad35b46bd01dab Mon Sep 17 00:00:00 2001
From: Matthew Ellison <m_ellison@ymail.com>
Date: Tue, 10 Feb 2026 22:14:48 -0500
Subject: [PATCH] Update themed component tests

---
 lib/component/button/LightButton.tsx          |  2 +-
 test/component/button/DangerButton.test.tsx   | 44 ++++++++--------
 test/component/button/DarkButton.test.tsx     | 44 ++++++++--------
 test/component/button/InfoButton.test.tsx     | 44 ++++++++--------
 test/component/button/LightButton.test.tsx    | 44 ++++++++--------
 test/component/button/MoltenButton.test.tsx   | 52 +++++++++----------
 test/component/button/PrimaryButton.test.tsx  | 44 ++++++++--------
 .../component/button/SecondaryButton.test.tsx | 44 ++++++++--------
 test/component/button/SuccessButton.test.tsx  | 52 +++++++++----------
 test/component/button/TertiaryButton.test.tsx | 44 ++++++++--------
 test/component/button/WarningButton.test.tsx  | 44 ++++++++--------
 .../message/DangerMessageBlock.test.tsx       |  2 +-
 .../message/DarkMessageBlock.test.tsx         |  2 +-
 .../message/InfoMessageBlock.test.tsx         |  2 +-
 .../message/MoltenMessageBlock.test.tsx       |  2 +-
 .../message/PrimaryMessageBlock.test.tsx      |  2 +-
 .../message/SecondaryMessageBlock.test.tsx    |  2 +-
 .../message/SuccessMessageBlock.test.tsx      |  2 +-
 .../message/TertiaryMessageBlock.test.tsx     |  2 +-
 .../message/WarningMessageBlock.test.tsx      |  2 +-
 vite.config.ts                                |  3 +-
 21 files changed, 239 insertions(+), 240 deletions(-)

diff --git a/lib/component/button/LightButton.tsx b/lib/component/button/LightButton.tsx
index f949c74..b60c5d4 100644
--- a/lib/component/button/LightButton.tsx
+++ b/lib/component/button/LightButton.tsx
@@ -31,7 +31,7 @@ const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 				//Outline
 				{
 					"border-light active:border-light-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
-					"border-neutral-400/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
+					"border-light-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
diff --git a/test/component/button/DangerButton.test.tsx b/test/component/button/DangerButton.test.tsx
index 0eed932..4f63275 100644
--- a/test/component/button/DangerButton.test.tsx
+++ b/test/component/button/DangerButton.test.tsx
@@ -21,8 +21,8 @@ describe("DangerButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-red-600", "hover:bg-red-700", "active:bg-red-800");
-		expect(button).toHaveClass("border-red-600", "hover:border-red-700", "active:border-red-800");
+		expect(button).toHaveClass("bg-danger", "active:bg-danger-dark");
+		expect(button).toHaveClass("border-danger", "active:border-danger-dark");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with custom className", () => {
@@ -173,8 +173,8 @@ describe("DangerButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-red-400/80");
-		expect(button).toHaveClass("border-red-400/80");
+		expect(button).toHaveClass("bg-danger-light/80");
+		expect(button).toHaveClass("border-danger-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -215,8 +215,8 @@ describe("DangerButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-danger-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-red-600", "hover:bg-red-700", "active:bg-red-800");
-		expect(button).toHaveClass("border", "border-red-600", "hover:border-red-700", "active:border-red-800");
+		expect(button).toHaveClass("bg-danger", "active:bg-danger-dark");
+		expect(button).toHaveClass("border", "border-danger", "active:border-danger-dark");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant", () => {
@@ -225,26 +225,26 @@ describe("DangerButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-danger-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-red-600", "hover:border-red-700", "active:border-red-800");
-		expect(button).toHaveClass("text-red-600", "hover:text-red-700", "active:text-red-800");
+		expect(button).toHaveClass("border", "border-danger", "active:border-danger-dark");
+		expect(button).toHaveClass("text-danger", "active:text-danger-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<DangerButton variant="outline-ghost">{buttonText}</DangerButton>);
 
 		const button = screen.getByTestId("mattrixwv-danger-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-red-600", "active:bg-red-700");
-		expect(button).toHaveClass("border", "border-red-600", "hover:border-red-600", "active:border-red-700");
-		expect(button).toHaveClass("text-red-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-danger", "active:bg-danger-dark");
+		expect(button).toHaveClass("border", "border-danger", "active:border-danger-dark");
+		expect(button).toHaveClass("text-danger", "hover:text-white", "active:text-white");
 	});
 	it("Renders with ghost variant", () => {
 		render(<DangerButton variant="ghost">{buttonText}</DangerButton>);
 
 		const button = screen.getByTestId("mattrixwv-danger-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-red-600", "active:bg-red-700");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-danger", "active:bg-danger-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-red-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("text-danger", "hover:text-white", "active:text-white");
 	});
 	it("Renders with icon variant", () => {
 		render(<DangerButton variant="icon">{buttonText}</DangerButton>);
@@ -253,7 +253,7 @@ describe("DangerButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-red-600", "hover:text-red-700", "active:text-red-800");
+		expect(button).toHaveClass("text-danger", "active:text-danger-dark");
 	});
 });
 
@@ -263,8 +263,8 @@ describe("DangerButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-danger-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-red-400/80");
-		expect(button).toHaveClass("border", "border-red-400/80");
+		expect(button).toHaveClass("bg-danger-light/80");
+		expect(button).toHaveClass("border", "border-danger-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -273,8 +273,8 @@ describe("DangerButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-danger-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-red-400/80");
-		expect(button).toHaveClass("text-red-400/80");
+		expect(button).toHaveClass("border", "border-danger-light/80");
+		expect(button).toHaveClass("text-danger-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<DangerButton variant="outline-ghost" disabled>{buttonText}</DangerButton>);
@@ -282,8 +282,8 @@ describe("DangerButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-danger-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-red-400/80");
-		expect(button).toHaveClass("text-red-400/80");
+		expect(button).toHaveClass("border", "border-danger-light/80");
+		expect(button).toHaveClass("text-danger-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<DangerButton variant="ghost" disabled>{buttonText}</DangerButton>);
@@ -292,7 +292,7 @@ describe("DangerButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-red-400/80");
+		expect(button).toHaveClass("text-danger-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<DangerButton variant="icon" disabled>{buttonText}</DangerButton>);
@@ -301,6 +301,6 @@ describe("DangerButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-red-400/80");
+		expect(button).toHaveClass("text-danger-light/80");
 	});
 });
diff --git a/test/component/button/DarkButton.test.tsx b/test/component/button/DarkButton.test.tsx
index 039fc53..9e7a4e7 100644
--- a/test/component/button/DarkButton.test.tsx
+++ b/test/component/button/DarkButton.test.tsx
@@ -21,8 +21,8 @@ describe("DarkButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-black", "hover:bg-neutral-700", "active:bg-neutral-600");
-		expect(button).toHaveClass("border-black", "hover:border-neutral-700", "active:border-neutral-600");
+		expect(button).toHaveClass("bg-dark", "active:bg-dark-mid");
+		expect(button).toHaveClass("border-dark", "active:border-dark-mid");
 		expect(button).toHaveClass("text-white");
 	});
 
@@ -178,8 +178,8 @@ describe("DarkButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-neutral-700/80");
-		expect(button).toHaveClass("border-neutral-700/80");
+		expect(button).toHaveClass("bg-dark-mid/80");
+		expect(button).toHaveClass("border-dark-mid/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -220,8 +220,8 @@ describe("DarkButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-dark-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-black", "hover:bg-neutral-700", "active:bg-neutral-600");
-		expect(button).toHaveClass("border", "border-black", "hover:border-neutral-700", "active:border-neutral-600");
+		expect(button).toHaveClass("bg-dark", "active:bg-dark-mid");
+		expect(button).toHaveClass("border", "border-dark", "active:border-dark-mid");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant", () => {
@@ -230,26 +230,26 @@ describe("DarkButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-dark-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-black", "hover:border-neutral-700", "active:border-neutral-600");
-		expect(button).toHaveClass("text-black", "hover:text-neutral-700", "active:text-neutral-600");
+		expect(button).toHaveClass("border", "border-dark", "active:border-dark-mid");
+		expect(button).toHaveClass("text-dark", "active:text-dark-mid");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<DarkButton variant="outline-ghost">{buttonText}</DarkButton>);
 
 		const button = screen.getByTestId("mattrixwv-dark-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-black", "active:bg-neutral-700");
-		expect(button).toHaveClass("border", "border-black", "hover:border-black", "active:border-neutral-700");
-		expect(button).toHaveClass("text-black", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-dark", "active:bg-dark-mid");
+		expect(button).toHaveClass("border", "border-dark", "active:border-dark-mid");
+		expect(button).toHaveClass("text-dark", "hover:text-white", "active:text-white");
 	});
 	it("Renders with ghost variant", () => {
 		render(<DarkButton variant="ghost">{buttonText}</DarkButton>);
 
 		const button = screen.getByTestId("mattrixwv-dark-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-black", "active:bg-neutral-700");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-dark", "active:bg-dark-mid");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-black", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("text-dark", "hover:text-white", "active:text-white");
 	});
 	it("Renders with icon variant", () => {
 		render(<DarkButton variant="icon">{buttonText}</DarkButton>);
@@ -258,7 +258,7 @@ describe("DarkButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-black", "hover:text-neutral-700", "active:text-neutral-600");
+		expect(button).toHaveClass("text-dark", "active:text-dark-mid");
 	});
 });
 
@@ -268,8 +268,8 @@ describe("DarkButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-dark-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-neutral-700/80");
-		expect(button).toHaveClass("border", "border-neutral-700/80");
+		expect(button).toHaveClass("bg-dark-mid/80");
+		expect(button).toHaveClass("border", "border-dark-mid/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -278,8 +278,8 @@ describe("DarkButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-dark-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-neutral-700/80");
-		expect(button).toHaveClass("text-neutral-700/80");
+		expect(button).toHaveClass("border", "border-dark-mid/80");
+		expect(button).toHaveClass("text-dark-mid/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<DarkButton variant="outline-ghost" disabled>{buttonText}</DarkButton>);
@@ -287,8 +287,8 @@ describe("DarkButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-dark-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-neutral-700/80");
-		expect(button).toHaveClass("text-neutral-700/80");
+		expect(button).toHaveClass("border", "border-dark-mid/80");
+		expect(button).toHaveClass("text-dark-mid/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<DarkButton variant="ghost" disabled>{buttonText}</DarkButton>);
@@ -297,7 +297,7 @@ describe("DarkButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-700/80");
+		expect(button).toHaveClass("text-dark-mid/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<DarkButton variant="icon" disabled>{buttonText}</DarkButton>);
@@ -306,6 +306,6 @@ describe("DarkButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-700/80");
+		expect(button).toHaveClass("text-dark-mid/80");
 	});
 });
diff --git a/test/component/button/InfoButton.test.tsx b/test/component/button/InfoButton.test.tsx
index 55a6528..df4f7c7 100644
--- a/test/component/button/InfoButton.test.tsx
+++ b/test/component/button/InfoButton.test.tsx
@@ -21,8 +21,8 @@ describe("InfoButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-cyan-500", "hover:bg-cyan-600", "active:bg-cyan-700");
-		expect(button).toHaveClass("border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
+		expect(button).toHaveClass("bg-info", "active:bg-info-dark");
+		expect(button).toHaveClass("border-info", "active:border-info-dark");
 		expect(button).toHaveClass("text-black");
 	});
 
@@ -178,8 +178,8 @@ describe("InfoButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-sky-300/80");
-		expect(button).toHaveClass("border-sky-300/80");
+		expect(button).toHaveClass("bg-info-light/80");
+		expect(button).toHaveClass("border-info-light/80");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -220,8 +220,8 @@ describe("InfoButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-info-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-cyan-500", "hover:bg-cyan-600", "active:bg-cyan-700");
-		expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
+		expect(button).toHaveClass("bg-info", "active:bg-info-dark");
+		expect(button).toHaveClass("border", "border-info", "active:border-info-dark");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant", () => {
@@ -230,26 +230,26 @@ describe("InfoButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-info-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
-		expect(button).toHaveClass("text-cyan-500", "hover:text-cyan-600", "active:text-cyan-700");
+		expect(button).toHaveClass("border", "border-info", "active:border-info-dark");
+		expect(button).toHaveClass("text-info", "active:text-info-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<InfoButton variant="outline-ghost">{buttonText}</InfoButton>);
 
 		const button = screen.getByTestId("mattrixwv-info-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-cyan-500", "active:bg-cyan-600");
-		expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-500", "active:border-cyan-600");
-		expect(button).toHaveClass("text-cyan-500", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-info", "active:bg-info-dark");
+		expect(button).toHaveClass("border", "border-info", "active:border-info-dark");
+		expect(button).toHaveClass("text-info", "hover:text-black", "active:text-black");
 	});
 	it("Renders with ghost variant", () => {
 		render(<InfoButton variant="ghost">{buttonText}</InfoButton>);
 
 		const button = screen.getByTestId("mattrixwv-info-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-cyan-500", "active:bg-cyan-600");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-info", "active:bg-info-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-cyan-500", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("text-info", "hover:text-black", "active:text-black");
 	});
 	it("Renders with icon variant", () => {
 		render(<InfoButton variant="icon">{buttonText}</InfoButton>);
@@ -258,7 +258,7 @@ describe("InfoButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-cyan-500", "hover:text-cyan-600", "active:text-cyan-700");
+		expect(button).toHaveClass("text-info", "active:text-info-dark");
 	});
 });
 
@@ -268,8 +268,8 @@ describe("InfoButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-info-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-sky-300/80");
-		expect(button).toHaveClass("border", "border-sky-300/80");
+		expect(button).toHaveClass("bg-info-light/80");
+		expect(button).toHaveClass("border", "border-info-light/80");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -278,8 +278,8 @@ describe("InfoButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-info-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-sky-300/80");
-		expect(button).toHaveClass("text-sky-300/80");
+		expect(button).toHaveClass("border", "border-info-light/80");
+		expect(button).toHaveClass("text-info-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<InfoButton variant="outline-ghost" disabled>{buttonText}</InfoButton>);
@@ -287,8 +287,8 @@ describe("InfoButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-info-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-sky-300/80");
-		expect(button).toHaveClass("text-sky-300/80");
+		expect(button).toHaveClass("border", "border-info-light/80");
+		expect(button).toHaveClass("text-info-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<InfoButton variant="ghost" disabled>{buttonText}</InfoButton>);
@@ -297,7 +297,7 @@ describe("InfoButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-sky-300/80");
+		expect(button).toHaveClass("text-info-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<InfoButton variant="icon" disabled>{buttonText}</InfoButton>);
@@ -306,6 +306,6 @@ describe("InfoButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-sky-300/80");
+		expect(button).toHaveClass("text-info-light/80");
 	});
 });
diff --git a/test/component/button/LightButton.test.tsx b/test/component/button/LightButton.test.tsx
index 07b885c..4336b4f 100644
--- a/test/component/button/LightButton.test.tsx
+++ b/test/component/button/LightButton.test.tsx
@@ -21,8 +21,8 @@ describe("LightButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-white", "hover:bg-neutral-300", "active:bg-neutral-400");
-		expect(button).toHaveClass("border-white", "hover:border-neutral-300", "active:border-neutral-400");
+		expect(button).toHaveClass("bg-light", "active:bg-light-dark");
+		expect(button).toHaveClass("border-light", "active:border-light-dark");
 		expect(button).toHaveClass("text-black");
 	});
 
@@ -178,8 +178,8 @@ describe("LightButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-neutral-400/80");
-		expect(button).toHaveClass("border-neutral-400/80");
+		expect(button).toHaveClass("bg-light-light/80");
+		expect(button).toHaveClass("border-light-light/80");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -220,8 +220,8 @@ describe("LightButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-light-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-white", "hover:bg-neutral-300", "active:bg-neutral-400");
-		expect(button).toHaveClass("border", "border-white", "hover:border-neutral-300", "active:border-neutral-400");
+		expect(button).toHaveClass("bg-light", "active:bg-light-dark");
+		expect(button).toHaveClass("border", "border-light", "active:border-light-dark");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant", () => {
@@ -230,26 +230,26 @@ describe("LightButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-light-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-white", "hover:border-neutral-300", "active:border-neutral-400");
-		expect(button).toHaveClass("text-white", "hover:text-neutral-300", "active:text-neutral-400");
+		expect(button).toHaveClass("border", "border-light", "active:border-light-dark");
+		expect(button).toHaveClass("text-light", "active:text-light-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<LightButton variant="outline-ghost">{buttonText}</LightButton>);
 
 		const button = screen.getByTestId("mattrixwv-light-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-white", "active:bg-neutral-300");
-		expect(button).toHaveClass("border", "border-white", "hover:border-white", "active:border-neutral-300");
-		expect(button).toHaveClass("text-white", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-light", "active:bg-light-dark");
+		expect(button).toHaveClass("border", "border-light", "active:border-light-dark");
+		expect(button).toHaveClass("text-light", "hover:text-black", "active:text-black");
 	});
 	it("Renders with ghost variant", () => {
 		render(<LightButton variant="ghost">{buttonText}</LightButton>);
 
 		const button = screen.getByTestId("mattrixwv-light-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-white", "active:bg-neutral-300");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-light", "active:bg-light-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-white", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("text-light", "hover:text-black", "active:text-black");
 	});
 	it("Renders with icon variant", () => {
 		render(<LightButton variant="icon">{buttonText}</LightButton>);
@@ -258,7 +258,7 @@ describe("LightButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-white", "hover:text-neutral-300", "active:text-neutral-400");
+		expect(button).toHaveClass("text-light", "active:text-light-dark");
 	});
 });
 
@@ -268,8 +268,8 @@ describe("LightButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-light-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-neutral-400/80");
-		expect(button).toHaveClass("border", "border-neutral-400/80");
+		expect(button).toHaveClass("bg-light-light/80");
+		expect(button).toHaveClass("border", "border-light-light/80");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -278,8 +278,8 @@ describe("LightButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-light-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-neutral-400/80");
-		expect(button).toHaveClass("text-neutral-400/80");
+		expect(button).toHaveClass("border", "border-light-light/80");
+		expect(button).toHaveClass("text-light-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<LightButton variant="outline-ghost" disabled>{buttonText}</LightButton>);
@@ -287,8 +287,8 @@ describe("LightButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-light-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-neutral-400/80");
-		expect(button).toHaveClass("text-neutral-400/80");
+		expect(button).toHaveClass("border", "border-light-light/80");
+		expect(button).toHaveClass("text-light-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<LightButton variant="ghost" disabled>{buttonText}</LightButton>);
@@ -297,7 +297,7 @@ describe("LightButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-400/80");
+		expect(button).toHaveClass("text-light-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<LightButton variant="icon" disabled>{buttonText}</LightButton>);
@@ -306,6 +306,6 @@ describe("LightButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-400/80");
+		expect(button).toHaveClass("text-light-light/80");
 	});
 });
diff --git a/test/component/button/MoltenButton.test.tsx b/test/component/button/MoltenButton.test.tsx
index ac57710..e206ed6 100644
--- a/test/component/button/MoltenButton.test.tsx
+++ b/test/component/button/MoltenButton.test.tsx
@@ -21,9 +21,9 @@ describe("MoltenButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-orange-600", "hover:bg-orange-700", "active:bg-orange-800");
-		expect(button).toHaveClass("border-orange-600", "hover:border-orange-700", "active:border-orange-800");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-molten", "active:bg-molten-dark");
+		expect(button).toHaveClass("border-molten", "active:border-molten-dark");
+		expect(button).toHaveClass("text-black");
 	});
 
 	it("Renders with custom className", () => {
@@ -178,9 +178,9 @@ describe("MoltenButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-orange-400/80");
-		expect(button).toHaveClass("border-orange-400/80");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-molten-light/80");
+		expect(button).toHaveClass("border-molten-light/80");
+		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with custom className when disabled", () => {
 		const customClass = "custom-molten-button-class";
@@ -220,9 +220,9 @@ describe("MoltenButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-molten-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-orange-600", "hover:bg-orange-700", "active:bg-orange-800");
-		expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-700", "active:border-orange-800");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-molten", "active:bg-molten-dark");
+		expect(button).toHaveClass("border", "border-molten", "active:border-molten-dark");
+		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant", () => {
 		render(<MoltenButton variant="outline">{buttonText}</MoltenButton>);
@@ -230,26 +230,26 @@ describe("MoltenButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-molten-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-700", "active:border-orange-800");
-		expect(button).toHaveClass("text-orange-600", "hover:text-orange-700", "active:text-orange-800");
+		expect(button).toHaveClass("border", "border-molten", "active:border-molten-dark");
+		expect(button).toHaveClass("text-molten", "active:text-molten-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<MoltenButton variant="outline-ghost">{buttonText}</MoltenButton>);
 
 		const button = screen.getByTestId("mattrixwv-molten-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-orange-600", "active:bg-orange-700");
-		expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-600", "active:border-orange-700");
-		expect(button).toHaveClass("text-orange-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-molten", "active:bg-molten-dark");
+		expect(button).toHaveClass("border", "border-molten", "active:border-molten-dark");
+		expect(button).toHaveClass("text-molten", "hover:text-black", "active:text-black");
 	});
 	it("Renders with ghost variant", () => {
 		render(<MoltenButton variant="ghost">{buttonText}</MoltenButton>);
 
 		const button = screen.getByTestId("mattrixwv-molten-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-orange-600", "active:bg-orange-700");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-molten", "active:bg-molten-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-orange-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("text-molten", "hover:text-black", "active:text-black");
 	});
 	it("Renders with icon variant", () => {
 		render(<MoltenButton variant="icon">{buttonText}</MoltenButton>);
@@ -258,7 +258,7 @@ describe("MoltenButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-orange-600", "hover:text-orange-700", "active:text-orange-800");
+		expect(button).toHaveClass("text-molten", "active:text-molten-dark");
 	});
 });
 
@@ -268,9 +268,9 @@ describe("MoltenButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-molten-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-orange-400/80");
-		expect(button).toHaveClass("border", "border-orange-400/80");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-molten-light/80");
+		expect(button).toHaveClass("border", "border-molten-light/80");
+		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant when disabled", () => {
 		render(<MoltenButton variant="outline" disabled>{buttonText}</MoltenButton>);
@@ -278,8 +278,8 @@ describe("MoltenButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-molten-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-orange-400/80");
-		expect(button).toHaveClass("text-orange-400/80");
+		expect(button).toHaveClass("border", "border-molten-light/80");
+		expect(button).toHaveClass("text-molten-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<MoltenButton variant="outline-ghost" disabled>{buttonText}</MoltenButton>);
@@ -287,8 +287,8 @@ describe("MoltenButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-molten-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-orange-400/80");
-		expect(button).toHaveClass("text-orange-400/80");
+		expect(button).toHaveClass("border", "border-molten-light/80");
+		expect(button).toHaveClass("text-molten-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<MoltenButton variant="ghost" disabled>{buttonText}</MoltenButton>);
@@ -297,7 +297,7 @@ describe("MoltenButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-orange-400/80");
+		expect(button).toHaveClass("text-molten-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<MoltenButton variant="icon" disabled>{buttonText}</MoltenButton>);
@@ -306,6 +306,6 @@ describe("MoltenButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-orange-400/80");
+		expect(button).toHaveClass("text-molten-light/80");
 	});
 });
diff --git a/test/component/button/PrimaryButton.test.tsx b/test/component/button/PrimaryButton.test.tsx
index ccf2127..567ef2c 100644
--- a/test/component/button/PrimaryButton.test.tsx
+++ b/test/component/button/PrimaryButton.test.tsx
@@ -21,8 +21,8 @@ describe("PrimaryButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-blue-600", "hover:bg-blue-700", "active:bg-blue-800");
-		expect(button).toHaveClass("border-blue-600", "hover:border-blue-700", "active:border-blue-800");
+		expect(button).toHaveClass("bg-primary", "active:bg-primary-dark");
+		expect(button).toHaveClass("border-primary", "active:border-primary-dark");
 		expect(button).toHaveClass("text-white");
 	});
 
@@ -178,8 +178,8 @@ describe("PrimaryButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-blue-400/80");
-		expect(button).toHaveClass("border-blue-400/80");
+		expect(button).toHaveClass("bg-primary-light/80");
+		expect(button).toHaveClass("border-primary-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -220,8 +220,8 @@ describe("PrimaryButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-primary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-blue-600", "hover:bg-blue-700", "active:bg-blue-800");
-		expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-700", "active:border-blue-800");
+		expect(button).toHaveClass("bg-primary", "active:bg-primary-dark");
+		expect(button).toHaveClass("border", "border-primary", "active:border-primary-dark");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant", () => {
@@ -230,26 +230,26 @@ describe("PrimaryButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-primary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-700", "active:border-blue-800");
-		expect(button).toHaveClass("text-blue-600", "hover:text-blue-700", "active:text-blue-800");
+		expect(button).toHaveClass("border", "border-primary", "active:border-primary-dark");
+		expect(button).toHaveClass("text-primary", "active:text-primary-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<PrimaryButton variant="outline-ghost">{buttonText}</PrimaryButton>);
 
 		const button = screen.getByTestId("mattrixwv-primary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-blue-600", "active:bg-blue-700");
-		expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-600", "active:border-blue-700");
-		expect(button).toHaveClass("text-blue-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-primary", "active:bg-primary-dark");
+		expect(button).toHaveClass("border", "border-primary", "active:border-primary-dark");
+		expect(button).toHaveClass("text-primary", "hover:text-white", "active:text-white");
 	});
 	it("Renders with ghost variant", () => {
 		render(<PrimaryButton variant="ghost">{buttonText}</PrimaryButton>);
 
 		const button = screen.getByTestId("mattrixwv-primary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-blue-600", "active:bg-blue-700");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-primary", "active:bg-primary-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-blue-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("text-primary", "hover:text-white", "active:text-white");
 	});
 	it("Renders with icon variant", () => {
 		render(<PrimaryButton variant="icon">{buttonText}</PrimaryButton>);
@@ -258,7 +258,7 @@ describe("PrimaryButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-blue-600", "hover:text-blue-700", "active:text-blue-800");
+		expect(button).toHaveClass("text-primary", "active:text-primary-dark");
 	});
 });
 
@@ -268,8 +268,8 @@ describe("PrimaryButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-primary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-blue-400/80");
-		expect(button).toHaveClass("border", "border-blue-400/80");
+		expect(button).toHaveClass("bg-primary-light/80");
+		expect(button).toHaveClass("border", "border-primary-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -278,8 +278,8 @@ describe("PrimaryButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-primary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-blue-400/80");
-		expect(button).toHaveClass("text-blue-400/80");
+		expect(button).toHaveClass("border", "border-primary-light/80");
+		expect(button).toHaveClass("text-primary-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<PrimaryButton variant="outline-ghost" disabled>{buttonText}</PrimaryButton>);
@@ -287,8 +287,8 @@ describe("PrimaryButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-primary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-blue-400/80");
-		expect(button).toHaveClass("text-blue-400/80");
+		expect(button).toHaveClass("border", "border-primary-light/80");
+		expect(button).toHaveClass("text-primary-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<PrimaryButton variant="ghost" disabled>{buttonText}</PrimaryButton>);
@@ -297,7 +297,7 @@ describe("PrimaryButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-blue-400/80");
+		expect(button).toHaveClass("text-primary-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<PrimaryButton variant="icon" disabled>{buttonText}</PrimaryButton>);
@@ -306,6 +306,6 @@ describe("PrimaryButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-blue-400/80");
+		expect(button).toHaveClass("text-primary-light/80");
 	});
 });
diff --git a/test/component/button/SecondaryButton.test.tsx b/test/component/button/SecondaryButton.test.tsx
index fdb3882..fdaa85c 100644
--- a/test/component/button/SecondaryButton.test.tsx
+++ b/test/component/button/SecondaryButton.test.tsx
@@ -21,8 +21,8 @@ describe("SecondaryButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-neutral-500", "hover:bg-neutral-600", "active:bg-neutral-700");
-		expect(button).toHaveClass("border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
+		expect(button).toHaveClass("bg-secondary", "active:bg-secondary-dark");
+		expect(button).toHaveClass("border-secondary", "active:border-secondary-dark");
 		expect(button).toHaveClass("text-white");
 	});
 
@@ -177,8 +177,8 @@ describe("SecondaryButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-neutral-300/80");
-		expect(button).toHaveClass("border-neutral-300/80");
+		expect(button).toHaveClass("bg-secondary-light/80");
+		expect(button).toHaveClass("border-secondary-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -218,8 +218,8 @@ describe("SecondaryButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-secondary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-neutral-500", "hover:bg-neutral-600", "active:bg-neutral-700");
-		expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
+		expect(button).toHaveClass("bg-secondary", "active:bg-secondary-dark");
+		expect(button).toHaveClass("border", "border-secondary", "active:border-secondary-dark");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant", () => {
@@ -228,26 +228,26 @@ describe("SecondaryButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-secondary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
-		expect(button).toHaveClass("text-neutral-500", "hover:text-neutral-600", "active:text-neutral-700");
+		expect(button).toHaveClass("border", "border-secondary", "active:border-secondary-dark");
+		expect(button).toHaveClass("text-secondary", "active:text-secondary-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<SecondaryButton variant="outline-ghost">{buttonText}</SecondaryButton>);
 
 		const button = screen.getByTestId("mattrixwv-secondary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-neutral-500", "active:bg-neutral-600");
-		expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-500", "active:border-neutral-600");
-		expect(button).toHaveClass("text-neutral-500", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-secondary", "active:bg-secondary-dark");
+		expect(button).toHaveClass("border", "border-secondary", "active:border-secondary-dark");
+		expect(button).toHaveClass("text-secondary", "hover:text-white", "active:text-white");
 	});
 	it("Renders with ghost variant", () => {
 		render(<SecondaryButton variant="ghost">{buttonText}</SecondaryButton>);
 
 		const button = screen.getByTestId("mattrixwv-secondary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-neutral-500", "active:bg-neutral-600");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-secondary", "active:bg-secondary-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-500", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("text-secondary", "hover:text-white", "active:text-white");
 	});
 	it("Renders with icon variant", () => {
 		render(<SecondaryButton variant="icon">{buttonText}</SecondaryButton>);
@@ -256,7 +256,7 @@ describe("SecondaryButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-500", "hover:text-neutral-600", "active:text-neutral-700");
+		expect(button).toHaveClass("text-secondary", "active:text-secondary-dark");
 	});
 });
 
@@ -266,8 +266,8 @@ describe("SecondaryButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-secondary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-neutral-300/80");
-		expect(button).toHaveClass("border", "border-neutral-300/80");
+		expect(button).toHaveClass("bg-secondary-light/80");
+		expect(button).toHaveClass("border", "border-secondary-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -276,8 +276,8 @@ describe("SecondaryButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-secondary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-neutral-300/80");
-		expect(button).toHaveClass("text-neutral-300/80");
+		expect(button).toHaveClass("border", "border-secondary-light/80");
+		expect(button).toHaveClass("text-secondary-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<SecondaryButton variant="outline-ghost" disabled>{buttonText}</SecondaryButton>);
@@ -285,8 +285,8 @@ describe("SecondaryButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-secondary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-neutral-300/80");
-		expect(button).toHaveClass("text-neutral-300/80");
+		expect(button).toHaveClass("border", "border-secondary-light/80");
+		expect(button).toHaveClass("text-secondary-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<SecondaryButton variant="ghost" disabled>{buttonText}</SecondaryButton>);
@@ -295,7 +295,7 @@ describe("SecondaryButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-300/80");
+		expect(button).toHaveClass("text-secondary-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<SecondaryButton variant="icon" disabled>{buttonText}</SecondaryButton>);
@@ -304,6 +304,6 @@ describe("SecondaryButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-neutral-300/80");
+		expect(button).toHaveClass("text-secondary-light/80");
 	});
 });
diff --git a/test/component/button/SuccessButton.test.tsx b/test/component/button/SuccessButton.test.tsx
index 3d0b305..a877260 100644
--- a/test/component/button/SuccessButton.test.tsx
+++ b/test/component/button/SuccessButton.test.tsx
@@ -21,9 +21,9 @@ describe("SuccessButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-green-600", "hover:bg-green-700", "active:bg-green-800");
-		expect(button).toHaveClass("border-green-600", "hover:border-green-700", "active:border-green-800");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-success", "active:bg-success-dark");
+		expect(button).toHaveClass("border-success", "active:border-success-dark");
+		expect(button).toHaveClass("text-black");
 	});
 
 	it("Renders with custom className", () => {
@@ -177,9 +177,9 @@ describe("SuccessButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-green-400/80");
-		expect(button).toHaveClass("border-green-400/80");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-success-light/80");
+		expect(button).toHaveClass("border-success-light/80");
+		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with custom className when disabled", () => {
 		const customClass = "custom-success-button-class";
@@ -218,9 +218,9 @@ describe("SuccessButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-success-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-green-600", "hover:bg-green-700", "active:bg-green-800");
-		expect(button).toHaveClass("border", "border-green-600", "hover:border-green-700", "active:border-green-800");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-success", "active:bg-success-dark");
+		expect(button).toHaveClass("border", "border-success", "active:border-success-dark");
+		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant", () => {
 		render(<SuccessButton variant="outline">{buttonText}</SuccessButton>);
@@ -228,26 +228,26 @@ describe("SuccessButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-success-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-green-600", "hover:border-green-700", "active:border-green-800");
-		expect(button).toHaveClass("text-green-600", "hover:text-green-700", "active:text-green-800");
+		expect(button).toHaveClass("border", "border-success", "active:border-success-dark");
+		expect(button).toHaveClass("text-success", "active:text-success-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<SuccessButton variant="outline-ghost">{buttonText}</SuccessButton>);
 
 		const button = screen.getByTestId("mattrixwv-success-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-green-600", "active:bg-green-700");
-		expect(button).toHaveClass("border", "border-green-600", "hover:border-green-600", "active:border-green-700");
-		expect(button).toHaveClass("text-green-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-success", "active:bg-success-dark");
+		expect(button).toHaveClass("border", "border-success", "active:border-success-dark");
+		expect(button).toHaveClass("text-success", "hover:text-black", "active:text-black");
 	});
 	it("Renders with ghost variant", () => {
 		render(<SuccessButton variant="ghost">{buttonText}</SuccessButton>);
 
 		const button = screen.getByTestId("mattrixwv-success-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-green-600", "active:bg-green-700");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-success", "active:bg-success-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-green-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("text-success", "hover:text-black", "active:text-black");
 	});
 	it("Renders with icon variant", () => {
 		render(<SuccessButton variant="icon">{buttonText}</SuccessButton>);
@@ -256,7 +256,7 @@ describe("SuccessButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-green-600", "hover:text-green-700", "active:text-green-800");
+		expect(button).toHaveClass("text-success", "active:text-success-dark");
 	});
 });
 
@@ -266,9 +266,9 @@ describe("SuccessButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-success-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-green-400/80");
-		expect(button).toHaveClass("border", "border-green-400/80");
-		expect(button).toHaveClass("text-white");
+		expect(button).toHaveClass("bg-success-light/80");
+		expect(button).toHaveClass("border", "border-success-light/80");
+		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant when disabled", () => {
 		render(<SuccessButton variant="outline" disabled>{buttonText}</SuccessButton>);
@@ -276,8 +276,8 @@ describe("SuccessButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-success-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-green-400/80");
-		expect(button).toHaveClass("text-green-400/80");
+		expect(button).toHaveClass("border", "border-success-light/80");
+		expect(button).toHaveClass("text-success-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<SuccessButton variant="outline-ghost" disabled>{buttonText}</SuccessButton>);
@@ -285,8 +285,8 @@ describe("SuccessButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-success-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-green-400/80");
-		expect(button).toHaveClass("text-green-400/80");
+		expect(button).toHaveClass("border", "border-success-light/80");
+		expect(button).toHaveClass("text-success-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<SuccessButton variant="ghost" disabled>{buttonText}</SuccessButton>);
@@ -295,7 +295,7 @@ describe("SuccessButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-green-400/80");
+		expect(button).toHaveClass("text-success-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<SuccessButton variant="icon" disabled>{buttonText}</SuccessButton>);
@@ -304,6 +304,6 @@ describe("SuccessButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-green-400/80");
+		expect(button).toHaveClass("text-success-light/80");
 	});
 });
diff --git a/test/component/button/TertiaryButton.test.tsx b/test/component/button/TertiaryButton.test.tsx
index 2889eba..54baa56 100644
--- a/test/component/button/TertiaryButton.test.tsx
+++ b/test/component/button/TertiaryButton.test.tsx
@@ -21,8 +21,8 @@ describe("TertiaryButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-purple-600", "hover:bg-purple-700", "active:bg-purple-800");
-		expect(button).toHaveClass("border-purple-600", "hover:border-purple-700", "active:border-purple-800");
+		expect(button).toHaveClass("bg-tertiary", "active:bg-tertiary-dark");
+		expect(button).toHaveClass("border-tertiary", "active:border-tertiary-dark");
 		expect(button).toHaveClass("text-white");
 	});
 
@@ -177,8 +177,8 @@ describe("TertiaryButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-purple-400/80");
-		expect(button).toHaveClass("border-purple-400/80");
+		expect(button).toHaveClass("bg-tertiary-light/80");
+		expect(button).toHaveClass("border-tertiary-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -218,8 +218,8 @@ describe("TertiaryButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-tertiary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-purple-600", "hover:bg-purple-700", "active:bg-purple-800");
-		expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-700", "active:border-purple-800");
+		expect(button).toHaveClass("bg-tertiary", "active:bg-tertiary-dark");
+		expect(button).toHaveClass("border", "border-tertiary", "active:border-tertiary-dark");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant", () => {
@@ -228,26 +228,26 @@ describe("TertiaryButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-tertiary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-700", "active:border-purple-800");
-		expect(button).toHaveClass("text-purple-600", "hover:text-purple-700", "active:text-purple-800");
+		expect(button).toHaveClass("border", "border-tertiary", "active:border-tertiary-dark");
+		expect(button).toHaveClass("text-tertiary", "active:text-tertiary-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<TertiaryButton variant="outline-ghost">{buttonText}</TertiaryButton>);
 
 		const button = screen.getByTestId("mattrixwv-tertiary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-purple-600", "active:bg-purple-700");
-		expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-600", "active:border-purple-700");
-		expect(button).toHaveClass("text-purple-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-tertiary", "active:bg-tertiary-dark");
+		expect(button).toHaveClass("border", "border-tertiary", "active:border-tertiary-dark");
+		expect(button).toHaveClass("text-tertiary", "hover:text-white", "active:text-white");
 	});
 	it("Renders with ghost variant", () => {
 		render(<TertiaryButton variant="ghost">{buttonText}</TertiaryButton>);
 
 		const button = screen.getByTestId("mattrixwv-tertiary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-purple-600", "active:bg-purple-700");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-tertiary", "active:bg-tertiary-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-purple-600", "hover:text-white", "active:text-white");
+		expect(button).toHaveClass("text-tertiary", "hover:text-white", "active:text-white");
 	});
 	it("Renders with icon variant", () => {
 		render(<TertiaryButton variant="icon">{buttonText}</TertiaryButton>);
@@ -256,7 +256,7 @@ describe("TertiaryButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-purple-600", "hover:text-purple-700", "active:text-purple-800");
+		expect(button).toHaveClass("text-tertiary", "active:text-tertiary-dark");
 	});
 });
 
@@ -266,8 +266,8 @@ describe("TertiaryButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-tertiary-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-purple-400/80");
-		expect(button).toHaveClass("border", "border-purple-400/80");
+		expect(button).toHaveClass("bg-tertiary-light/80");
+		expect(button).toHaveClass("border", "border-tertiary-light/80");
 		expect(button).toHaveClass("text-white");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -276,8 +276,8 @@ describe("TertiaryButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-tertiary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-purple-400/80");
-		expect(button).toHaveClass("text-purple-400/80");
+		expect(button).toHaveClass("border", "border-tertiary-light/80");
+		expect(button).toHaveClass("text-tertiary-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<TertiaryButton variant="outline-ghost" disabled>{buttonText}</TertiaryButton>);
@@ -285,8 +285,8 @@ describe("TertiaryButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-tertiary-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-purple-400/80");
-		expect(button).toHaveClass("text-purple-400/80");
+		expect(button).toHaveClass("border", "border-tertiary-light/80");
+		expect(button).toHaveClass("text-tertiary-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<TertiaryButton variant="ghost" disabled>{buttonText}</TertiaryButton>);
@@ -295,7 +295,7 @@ describe("TertiaryButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-purple-400/80");
+		expect(button).toHaveClass("text-tertiary-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<TertiaryButton variant="icon" disabled>{buttonText}</TertiaryButton>);
@@ -304,6 +304,6 @@ describe("TertiaryButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-purple-400/80");
+		expect(button).toHaveClass("text-tertiary-light/80");
 	});
 });
diff --git a/test/component/button/WarningButton.test.tsx b/test/component/button/WarningButton.test.tsx
index 499868d..a440f8b 100644
--- a/test/component/button/WarningButton.test.tsx
+++ b/test/component/button/WarningButton.test.tsx
@@ -21,8 +21,8 @@ describe("WarningButton Component", () => {
 		expect(button).toHaveClass("border");
 		expect(button).toHaveClass("cursor-pointer");
 		//Colors
-		expect(button).toHaveClass("bg-yellow-500", "hover:bg-yellow-600", "active:bg-yellow-700");
-		expect(button).toHaveClass("border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
+		expect(button).toHaveClass("bg-warning", "active:bg-warning-dark");
+		expect(button).toHaveClass("border-warning", "active:border-warning-dark");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with custom className", () => {
@@ -173,8 +173,8 @@ describe("WarningButton Component Disabled", () => {
 		expect(button).toHaveClass("border");
 		//Disabled state
 		expect(button).not.toHaveClass("cursor-pointer");
-		expect(button).toHaveClass("bg-yellow-300/80");
-		expect(button).toHaveClass("border-yellow-300/80");
+		expect(button).toHaveClass("bg-warning-light/80");
+		expect(button).toHaveClass("border-warning-light/80");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with custom className when disabled", () => {
@@ -215,8 +215,8 @@ describe("WarningButton Component Variants", () => {
 
 		const button = screen.getByTestId("mattrixwv-warning-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-yellow-500", "hover:bg-yellow-600", "active:bg-yellow-700");
-		expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
+		expect(button).toHaveClass("bg-warning", "active:bg-warning-dark");
+		expect(button).toHaveClass("border", "border-warning", "active:border-warning-dark");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant", () => {
@@ -225,26 +225,26 @@ describe("WarningButton Component Variants", () => {
 		const button = screen.getByTestId("mattrixwv-warning-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
-		expect(button).toHaveClass("text-yellow-500", "hover:text-yellow-600", "active:text-yellow-700");
+		expect(button).toHaveClass("border", "border-warning", "active:border-warning-dark");
+		expect(button).toHaveClass("text-warning", "active:text-warning-dark");
 	});
 	it("Renders with outline-ghost variant", () => {
 		render(<WarningButton variant="outline-ghost">{buttonText}</WarningButton>);
 
 		const button = screen.getByTestId("mattrixwv-warning-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-yellow-500", "active:bg-yellow-600");
-		expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-500", "active:border-yellow-600");
-		expect(button).toHaveClass("text-yellow-500", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-warning", "active:bg-warning-dark");
+		expect(button).toHaveClass("border", "border-warning", "active:border-warning-dark");
+		expect(button).toHaveClass("text-warning", "hover:text-black", "active:text-black");
 	});
 	it("Renders with ghost variant", () => {
 		render(<WarningButton variant="ghost">{buttonText}</WarningButton>);
 
 		const button = screen.getByTestId("mattrixwv-warning-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-transparent", "hover:bg-yellow-500", "active:bg-yellow-600");
+		expect(button).toHaveClass("bg-transparent", "hover:bg-warning", "active:bg-warning-dark");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-yellow-500", "hover:text-black", "active:text-black");
+		expect(button).toHaveClass("text-warning", "hover:text-black", "active:text-black");
 	});
 	it("Renders with icon variant", () => {
 		render(<WarningButton variant="icon">{buttonText}</WarningButton>);
@@ -253,7 +253,7 @@ describe("WarningButton Component Variants", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-yellow-500", "hover:text-yellow-600", "active:text-yellow-700");
+		expect(button).toHaveClass("text-warning", "active:text-warning-dark");
 	});
 });
 
@@ -263,8 +263,8 @@ describe("WarningButton Component Variants Disabled", () => {
 
 		const button = screen.getByTestId("mattrixwv-warning-button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass("bg-yellow-300/80");
-		expect(button).toHaveClass("border", "border-yellow-300/80");
+		expect(button).toHaveClass("bg-warning-light/80");
+		expect(button).toHaveClass("border", "border-warning-light/80");
 		expect(button).toHaveClass("text-black");
 	});
 	it("Renders with outline variant when disabled", () => {
@@ -273,8 +273,8 @@ describe("WarningButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-warning-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-yellow-300/80");
-		expect(button).toHaveClass("text-yellow-300/80");
+		expect(button).toHaveClass("border", "border-warning-light/80");
+		expect(button).toHaveClass("text-warning-light/80");
 	});
 	it("Renders with outline-ghost variant when disabled", () => {
 		render(<WarningButton variant="outline-ghost" disabled>{buttonText}</WarningButton>);
@@ -282,8 +282,8 @@ describe("WarningButton Component Variants Disabled", () => {
 		const button = screen.getByTestId("mattrixwv-warning-button");
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
-		expect(button).toHaveClass("border", "border-yellow-300/80");
-		expect(button).toHaveClass("text-yellow-300/80");
+		expect(button).toHaveClass("border", "border-warning-light/80");
+		expect(button).toHaveClass("text-warning-light/80");
 	});
 	it("Renders with ghost variant when disabled", () => {
 		render(<WarningButton variant="ghost" disabled>{buttonText}</WarningButton>);
@@ -292,7 +292,7 @@ describe("WarningButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-yellow-300/80");
+		expect(button).toHaveClass("text-warning-light/80");
 	});
 	it("Renders with icon variant when disabled", () => {
 		render(<WarningButton variant="icon" disabled>{buttonText}</WarningButton>);
@@ -301,6 +301,6 @@ describe("WarningButton Component Variants Disabled", () => {
 		expect(button).toBeInTheDocument();
 		expect(button).toHaveClass("bg-transparent");
 		expect(button).toHaveClass("border-none");
-		expect(button).toHaveClass("text-yellow-300/80");
+		expect(button).toHaveClass("text-warning-light/80");
 	});
 });
diff --git a/test/component/message/DangerMessageBlock.test.tsx b/test/component/message/DangerMessageBlock.test.tsx
index a05cc63..5d8818a 100644
--- a/test/component/message/DangerMessageBlock.test.tsx
+++ b/test/component/message/DangerMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-red-200", "text-red-600");
+		expect(messageBlock).toHaveClass("bg-danger-xlight", "text-danger-dark");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-danger-message-block-class";
diff --git a/test/component/message/DarkMessageBlock.test.tsx b/test/component/message/DarkMessageBlock.test.tsx
index 94f2f63..d22aff4 100644
--- a/test/component/message/DarkMessageBlock.test.tsx
+++ b/test/component/message/DarkMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-black", "text-white");
+		expect(messageBlock).toHaveClass("bg-dark", "text-dark-xlight");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-dark-message-block-class";
diff --git a/test/component/message/InfoMessageBlock.test.tsx b/test/component/message/InfoMessageBlock.test.tsx
index 3bdc3d4..49f0d2c 100644
--- a/test/component/message/InfoMessageBlock.test.tsx
+++ b/test/component/message/InfoMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-cyan-100", "text-blue-600");
+		expect(messageBlock).toHaveClass("bg-info-xlight", "text-info-xdark");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-info-message-block-class";
diff --git a/test/component/message/MoltenMessageBlock.test.tsx b/test/component/message/MoltenMessageBlock.test.tsx
index fc9982e..d0e7d99 100644
--- a/test/component/message/MoltenMessageBlock.test.tsx
+++ b/test/component/message/MoltenMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-orange-100", "text-orange-600");
+		expect(messageBlock).toHaveClass("bg-molten-xlight", "text-molten-mid");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-molten-message-block-class";
diff --git a/test/component/message/PrimaryMessageBlock.test.tsx b/test/component/message/PrimaryMessageBlock.test.tsx
index f95ce9e..129a252 100644
--- a/test/component/message/PrimaryMessageBlock.test.tsx
+++ b/test/component/message/PrimaryMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-blue-200", "text-blue-600");
+		expect(messageBlock).toHaveClass("bg-primary-xlight", "text-primary-dark");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-primary-message-block-class";
diff --git a/test/component/message/SecondaryMessageBlock.test.tsx b/test/component/message/SecondaryMessageBlock.test.tsx
index 399ccb5..676d578 100644
--- a/test/component/message/SecondaryMessageBlock.test.tsx
+++ b/test/component/message/SecondaryMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-neutral-200", "text-neutral-600");
+		expect(messageBlock).toHaveClass("bg-secondary-xlight", "text-secondary-mid");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-secondary-message-block-class";
diff --git a/test/component/message/SuccessMessageBlock.test.tsx b/test/component/message/SuccessMessageBlock.test.tsx
index ba7d95d..17caa5e 100644
--- a/test/component/message/SuccessMessageBlock.test.tsx
+++ b/test/component/message/SuccessMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-green-100", "text-green-600");
+		expect(messageBlock).toHaveClass("bg-success-xlight", "text-success-mid");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-success-message-block-class";
diff --git a/test/component/message/TertiaryMessageBlock.test.tsx b/test/component/message/TertiaryMessageBlock.test.tsx
index ca8cce6..e92d067 100644
--- a/test/component/message/TertiaryMessageBlock.test.tsx
+++ b/test/component/message/TertiaryMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-purple-200", "text-purple-600");
+		expect(messageBlock).toHaveClass("bg-tertiary-xlight", "text-tertiary-mid");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-tertiary-message-block-class";
diff --git a/test/component/message/WarningMessageBlock.test.tsx b/test/component/message/WarningMessageBlock.test.tsx
index 4a28aa5..6d476e8 100644
--- a/test/component/message/WarningMessageBlock.test.tsx
+++ b/test/component/message/WarningMessageBlock.test.tsx
@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
 		expect(messageBlock).toHaveClass("px-4", "py-2");
 		expect(messageBlock).toHaveClass("border");
 		expect(messageBlock).toHaveClass("rounded-lg");
-		expect(messageBlock).toHaveClass("bg-yellow-100", "text-yellow-600");
+		expect(messageBlock).toHaveClass("bg-warning-xlight", "text-warning-dark");
 	});
 	it("Renders with custom className", () => {
 		const customClassName = "custom-warning-message-block-class";
diff --git a/vite.config.ts b/vite.config.ts
index eeca58a..745ff14 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -61,8 +61,7 @@ export default defineConfig({
 	publicDir: false,
 	test: {
 		globals: true,
-		root: "test",
 		environment: "jsdom",
-		setupFiles: [ "jest.config.ts" ]
+		setupFiles: [ "test/jest.config.ts" ]
 	}
 });