feat: configured token based multi them architecture

package.json

@@ -13,7 +13,8 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_bd8d0a3ce41cca0"
+    "chromatic": "npx chromatic --project-token=chpt_bd8d0a3ce41cca0",
+    "generate:api": "openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/types.ts"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css,scss,md}": [
@@ -22,6 +23,7 @@
     ]
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "@react-oauth/google": "^0.12.2",
     "@storybook/react": "^10.3.6",
     "@tailwindcss/vite": "^4.2.4",
@@ -30,7 +32,6 @@
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "generate:api": "openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/types.ts",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.542.0",
@@ -42,7 +43,8 @@
     "react-router-dom": "^7.7.1",
     "styled-components": "^6.2.0",
     "tailwindcss": "^4.2.4",
-    "vite-plugin-remove-console": "^2.2.0"
+    "vite-plugin-remove-console": "^2.2.0",
+    "zustand": "^5.0.13"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",
@@ -79,4 +81,4 @@
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.5"
   }
-}
+}

src/App.tsx

@@ -4,21 +4,22 @@
 import { RouterProvider } from 'react-router-dom'
 import router from './routes'
 // import styles from "./App.module.css";
-import { AuthProvider } from './context/AuthContext'
+// import { AuthProvider  } from './context/AuthContext'
 // import * from '@mui/styled-engine-sc' as styledEngineSC;,
 import { LanguageProvider } from './context/LanguageContext'
 import CustomTranslate from './textTranslation/CustomTranslate'
 
 function App() {
   return (
-    <AuthProvider>
+    // <AuthProvider>
       <LanguageProvider>
         <CustomTranslate />
         {/* <GoogleTranslate/> */}
         <RouterProvider router={router} />
+        {/* <TestCard /> */}
         {/* </CustomTranslate> */}
       </LanguageProvider>
-    </AuthProvider>
+    // </AuthProvider>
   )
 }
 export default App

src/LoginCard.tsx

@@ -0,0 +1,79 @@
+function LoginCard() {
+
+    const handleGoogleLogin = () => {
+        // Replace with your actual backend OAuth endpoint
+        window.location.href = 'http://localhost:8080/oauth2/authorization/google';
+    };
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center bg-bg-primary" >
+            <div className="w-full max-w-sm bg-bg-secondary border border-border-primary rounded-lg shadow-md p-6 space-y-6" >
+
+                {/* Heading */}
+                <div className="space-y-1">
+                    <h2 className="text-2xl text-center font-semibold text-text-primary">
+                        Welcome
+                    </h2>
+
+                    <p className="text-sm text-center my-3 text-text-secondary">
+                        Sign in using your Google account
+                    </p>
+                </div>
+
+                {/* Google OAuth Button */}
+                <button
+                    onClick={handleGoogleLogin}
+                    className="
+                        cursor-pointer
+                        w-full
+                        flex
+                        items-center
+                        justify-center
+                        gap-3
+                        py-3
+                        rounded-md
+                        bg-bg-tertiary
+                        text-text-primary
+                        border
+                        border-border-secondary
+                        hover:bg-bg-primary
+                        transition
+                    "
+                >
+                    {/* Google Icon */}
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 48 48"
+                        className="w-5 h-5"
+                    >
+                        <path
+                            fill="#FFC107"
+                            d="M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.7 1.1 7.8 2.9l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"
+                        />
+                        <path
+                            fill="#FF3D00"
+                            d="M6.3 14.7l6.6 4.8C14.7 15.1 18.9 12 24 12c3 0 5.7 1.1 7.8 2.9l5.7-5.7C34.1 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"
+                        />
+                        <path
+                            fill="#4CAF50"
+                            d="M24 44c5.2 0 10-2 13.5-5.3l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.3 0-9.7-3.3-11.3-8l-6.5 5C9.5 39.5 16.2 44 24 44z"
+                        />
+                        <path
+                            fill="#1976D2"
+                            d="M43.6 20.5H42V20H24v8h11.3c-1.1 3.1-3.3 5.5-6.2 7.1l6.2 5.2C39.1 36.7 44 31 44 24c0-1.3-.1-2.3-.4-3.5z"
+                        />
+                    </svg>
+
+                    Continue with Google
+                </button>
+
+                {/* Footer */}
+                <p className="text-xs text-center text-text-tertiary">
+                    By continuing, you agree to our <a href="/terms" className="text-blue-500 hover:underline">Terms of Service</a> and <a href="/privacy" className="text-blue-500 hover:underline">Privacy Policy</a>
+                </p>
+            </div>
+        </div>
+    );
+}
+
+export default LoginCard;

src/TestCard.tsx

@@ -0,0 +1,42 @@
+// import React from 'react';
+import { useTheme } from '@/shared/theme/useTheme';
+// import { type ThemeName } from '@/shared/theme/types';
+import { themeRegistry } from './shared/theme';
+
+function TestCard() {
+    const { setTheme, themeName } = useTheme();
+    // const availableThemes1: ThemeName[] = ['light', 'dark'];
+    const { availableThemes } = useTheme();
+    return (
+        <div className="min-h-screen bg-bg-primary text-text-primary space-y-4 p-4">
+            <div className="flex gap-2">
+                {availableThemes.map((theme) => {
+                    const t = themeRegistry[theme];
+                    return (
+                        <button
+                            key={theme}
+                            onClick={() => setTheme(theme)}
+                            className="border px-3 py-1 rounded-md"
+                            disabled={!t.isProductionReady}
+                        >
+                            {theme}
+                        </button>
+                    )
+                })}
+            </div>
+
+            <div className="bg-bg-primary text-text-primary border-border border-border-secondary rounded-md shadow-md p-4">
+                Current theme: {themeName}
+            </div>
+
+            <div className="bg-bg-primary text-text-primary border-border border-border-secondary rounded-md shadow-md p-4">
+                Test Theme
+            </div>
+
+            <div className="bg-bg-primary text-text-primary border-border border-border-secondary rounded-md shadow-md p-4">
+                Full token test
+            </div>
+        </div>
+    );
+}
+export default TestCard;

src/ThemeToggleSwitch.tsx

@@ -0,0 +1,96 @@
+import { useState, useRef, useEffect } from 'react';
+import { useTheme } from '@/shared/theme/useTheme';
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+import type { ThemeName } from './shared/theme';
+
+function ThemeToggleSwitch() {
+    const { themeName, setTheme } = useTheme();
+    const [open, setOpen] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    // Close dropdown on outside click
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (ref.current && !ref.current.contains(e.target as Node)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const handleSelect = (theme: string) => {
+        if (theme === 'digital' || theme === 'monochrome') return; // placeholder
+        setTheme(theme as ThemeName);
+        setOpen(false);
+    };
+
+    return (
+        <div className="relative inline-block absolute top-4 left-4" ref={ref}>
+            {/* Toggle Button */}
+            <button
+                onClick={() => setOpen((prev) => !prev)}
+                className="cursor-pointer flex items-center justify-center w-9 h-9 rounded-md 
+                   bg-bg-secondary border border-border-secondary 
+                   text-text-secondary hover:bg-bg-tertiary 
+                   transition"
+            >
+                {themeName === 'dark' ?
+                    <MoonIcon className="size-6" />
+                    :
+                    <SunIcon className="size-6" />
+                }
+            </button>
+
+            {/* Dropdown */}
+            {open && (
+                <div
+                    className="absolute right-0 mt-2 w-44 rounded-lg 
+                     bg-bg-secondary border border-border-primary 
+                     shadow-md p-1 space-y-1 z-50"
+                >
+                    {/* Light */}
+                    <button
+                        onClick={() => handleSelect('light')}
+                        className="cursor-pointer w-full text-left px-3 py-2 rounded-md text-sm 
+                       text-text-primary hover:bg-bg-tertiary transition"
+                    >
+                        Light
+                    </button>
+
+                    {/* Dark */}
+                    <button
+                        onClick={() => handleSelect('dark')}
+                        className="cursor-pointer w-full text-left px-3 py-2 rounded-md text-sm 
+                       text-text-primary hover:bg-bg-tertiary transition"
+                    >
+                        Dark
+                    </button>
+
+                    {/* Divider */}
+                    <div className="h-px bg-border-tertiary my-1" />
+
+                    {/* Digital (disabled) */}
+                    <button
+                        disabled
+                        className="cursor-pointer w-full text-left px-3 py-2 rounded-md text-sm 
+                       text-text-tertiary cursor-not-allowed"
+                    >
+                        Digital (coming soon)
+                    </button>
+
+                    {/* Monochrome (disabled) */}
+                    <button
+                        disabled
+                        className="cursor-pointer w-full text-left px-3 py-2 rounded-md text-sm 
+                       text-text-tertiary cursor-not-allowed"
+                    >
+                        Monochrome (coming soon)
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ThemeToggleSwitch;