feat: updated app to tailwind 4.x

src/components/generic/Mono.tsx

@@ -5,7 +5,7 @@ export const Mono = ({
 }: JSX.IntrinsicElements["span"]): JSX.Element => {
   return (
     <span
-      className={`font-mono text-sm text-textSecondary ${className ?? ""}`}
+      className={`font-mono text-sm text-text-secondary ${className ?? ""}`}
       {...rest}
     >
       {children}

src/components/generic/Table/index.tsx

@@ -58,7 +58,7 @@ export const Table = ({ headings, rows }: TableProps): JSX.Element => {
 
   return (
     <table className="min-w-full">
-      <thead className="bg-backgroundPrimary text-sm font-semibold text-textPrimary">
+      <thead className="bg-backgound-primary text-sm font-semibold text-text-primary">
         <tr>
           {headings.map((heading) => (
             <th
@@ -92,7 +92,7 @@ export const Table = ({ headings, rows }: TableProps): JSX.Element => {
             {row.map((item, index) => (
               <td
                 key={item.key ?? index}
-                className="whitespace-nowrap py-2 text-sm text-textSecondary first:pl-2"
+                className="whitespace-nowrap py-2 text-sm text-text-secondary first:pl-2"
               >
                 {item}
               </td>

src/components/generic/ThemeController.tsx

@@ -1,18 +0,0 @@
-import { useAppStore } from "@core/stores/appStore.ts";
-import type { ReactNode } from "react";
-
-export interface ThemeControllerProps {
-  children: ReactNode;
-}
-
-export const ThemeController = ({
-  children,
-}: ThemeControllerProps): JSX.Element => {
-  const { darkMode, accent } = useAppStore();
-
-  return (
-    <div data-theme={darkMode ? "dark" : "light"} data-accent={accent}>
-      {children}
-    </div>
-  );
-};

src/components/generic/ThemeProvider.tsx

@@ -0,0 +1,67 @@
+import type React from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme") as Theme;
+      return savedTheme || "system";
+    }
+    return "system";
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      root.classList.add(systemTheme);
+    } else {
+      root.classList.add(theme);
+    }
+
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    const handleChange = () => {
+      if (theme === "system") {
+        const root = window.document.documentElement;
+        root.classList.remove("light", "dark");
+        root.classList.add(mediaQuery.matches ? "dark" : "light");
+      }
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}