- {/* Main Content Area */}
-
-
-
+ {/* Main Content */}
+
+
-
-
- {/*
*/}
+
+
- )
-}
+ );
+};
-export default BaseLayout
+export default BaseLayout;
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 4feab10..45c0bc5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,6 +4,7 @@ import App from './App.tsx'
import { StyleSheetManager } from 'styled-components'
import './index.css'
import { enablePhonetic } from '@services/inputInterceptor.ts'
+import { ThemeProvider } from '@/shared/theme/ThemeProvider.tsx'
enablePhonetic()
/**
@@ -44,7 +45,9 @@ if (import.meta.env.PROD && !nonce) {
createRoot(document.getElementById('root')!).render(
-
+
+
+
)
diff --git a/src/routes/MainRouters.tsx b/src/routes/MainRouters.tsx
index b73efba..03270a3 100644
--- a/src/routes/MainRouters.tsx
+++ b/src/routes/MainRouters.tsx
@@ -10,7 +10,8 @@ import NotFound from '@views/NotFound/NotFound'
// import Profile from "@views/Profile/Profile";
// import Profile1 from "@views/Profile/Profile1";
// import Setting from "@views/Setting/Setting";
-import { Navigate } from 'react-router-dom'
+// import { Navigate } from 'react-router-dom'
+import LoginPage from '@/views/LoginPage'
const MainRoutes = {
path: '/',
@@ -18,7 +19,7 @@ const MainRoutes = {
children: [
{
index: true,
- element:
,
+ element:
,
},
{
path: 'oauth/callback',
diff --git a/src/shared/theme/ThemePicker.tsx b/src/shared/theme/ThemePicker.tsx
new file mode 100644
index 0000000..7a51a7b
--- /dev/null
+++ b/src/shared/theme/ThemePicker.tsx
@@ -0,0 +1,21 @@
+import { themeRegistry } from "./themeRegistry";
+import { useTheme } from "./useTheme";
+import type { ThemeName } from './types';
+
+export const ThemePicker = () => {
+ const { themeName, setTheme } = useTheme();
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src/shared/theme/ThemeProvider.tsx b/src/shared/theme/ThemeProvider.tsx
new file mode 100644
index 0000000..5733606
--- /dev/null
+++ b/src/shared/theme/ThemeProvider.tsx
@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { themeRegistry } from './themeRegistry';
+import { useThemeStore } from './themeStore';
+
+const applyTokens = (
+ tokens: object,
+ prefix = ''
+) => {
+ const root = document.documentElement;
+
+ Object.entries(tokens).forEach(([key, value]) => {
+ const newPrefix = prefix
+ ? `${prefix}-${key}`
+ : key;
+
+ if (
+ typeof value === 'object' &&
+ value !== null
+ ) {
+ applyTokens(value, newPrefix);
+ } else if (typeof value === 'string') {
+ root.style.setProperty(
+ `--${newPrefix}`,
+ value
+ );
+ }
+ });
+};
+
+export const ThemeProvider = ({
+ children,
+}: {
+ children: React.ReactNode;
+}) => {
+ const themeName = useThemeStore(
+ (s) => s.themeName
+ );
+
+ useEffect(() => {
+ const resolvedTheme =
+ themeRegistry[themeName] ??
+ themeRegistry.light;
+
+ document.documentElement.setAttribute(
+ 'data-theme',
+ resolvedTheme.name
+ );
+
+ applyTokens(resolvedTheme.tokens);
+
+ document.documentElement.setAttribute(
+ 'data-theme-loaded',
+ 'true'
+ );
+ }, [themeName]);
+
+ return children;
+};
\ No newline at end of file
diff --git a/src/shared/theme/index.ts b/src/shared/theme/index.ts
new file mode 100644
index 0000000..5febb6c
--- /dev/null
+++ b/src/shared/theme/index.ts
@@ -0,0 +1,5 @@
+export * from './types';
+export * from './themeRegistry';
+export * from './themeStore';
+export * from './useTheme';
+export * from './ThemePicker';
diff --git a/src/shared/theme/themeRegistry.ts b/src/shared/theme/themeRegistry.ts
new file mode 100644
index 0000000..e9d3b57
--- /dev/null
+++ b/src/shared/theme/themeRegistry.ts
@@ -0,0 +1,15 @@
+import { lightTheme } from './tokens/light';
+import { darkTheme } from './tokens/dark';
+import { digitalTheme } from './tokens/digital';
+import { monochromeTheme } from './tokens/monochrome';
+import type { Theme, ThemeName } from './types';
+
+export const themeRegistry: Record
= {
+ light: lightTheme,
+ dark: darkTheme,
+ digital: digitalTheme,
+ monochrome: monochromeTheme,
+};
+
+
+export const availableThemes = Object.keys(themeRegistry);
\ No newline at end of file
diff --git a/src/shared/theme/themeStore.ts b/src/shared/theme/themeStore.ts
new file mode 100644
index 0000000..195e795
--- /dev/null
+++ b/src/shared/theme/themeStore.ts
@@ -0,0 +1,32 @@
+import { create } from 'zustand';
+import type { ThemeName } from './types';
+import { themeRegistry } from './themeRegistry';
+
+interface ThemeStore {
+ themeName: ThemeName;
+ setTheme: (theme: ThemeName) => void;
+}
+
+const getInitialTheme = (): ThemeName => {
+ const stored = localStorage.getItem('app-theme') as ThemeName | null;
+
+ if (stored && stored in themeRegistry) {
+ return stored;
+ }
+
+ const prefersDark = window.matchMedia(
+ '(prefers-color-scheme: dark)'
+ ).matches;
+
+ return prefersDark ? 'dark' : 'light';
+};
+
+export const useThemeStore = create((set: (partial: Partial) => void) => ({
+ themeName: getInitialTheme(),
+
+ setTheme: (themeName: ThemeName) => {
+ localStorage.setItem('app-theme', themeName);
+
+ set({ themeName });
+ },
+}));
\ No newline at end of file
diff --git a/src/shared/theme/tokens/dark.ts b/src/shared/theme/tokens/dark.ts
new file mode 100644
index 0000000..2ae8111
--- /dev/null
+++ b/src/shared/theme/tokens/dark.ts
@@ -0,0 +1,54 @@
+import { type Theme } from '../types';
+
+export const darkTheme: Theme = {
+ name: 'dark',
+ tokens: {
+ color: {
+ // Background layers
+ 'bg-primary': '#1c1c1a',
+ 'bg-secondary': '#2a2a27',
+ 'bg-tertiary': '#141412',
+
+ // Background status
+ 'bg-danger': '#3d1a1a',
+ 'bg-warning': '#3d2a08',
+ 'bg-success': '#1a2e08',
+ 'bg-info': '#0d2540',
+
+ // Text hierarchy
+ 'text-primary': '#f0ede6',
+ 'text-secondary': '#b4b2a9',
+ 'text-tertiary': '#888780',
+
+ // Text status
+ 'text-danger': '#f09595',
+ 'text-warning': '#fac775',
+ 'text-success': '#c0dd97',
+ 'text-info': '#85b7eb',
+
+ // Border hierarchy
+ 'border-primary': 'rgba(255,255,255,0.32)',
+ 'border-secondary': 'rgba(255,255,255,0.20)',
+ 'border-tertiary': 'rgba(255,255,255,0.10)',
+
+ // Border status
+ 'border-danger': '#791f1f',
+ 'border-warning': '#633806',
+ 'border-success': '#27500a',
+ 'border-info': '#0c447c'
+ },
+
+ radius: {
+ sm: '4px',
+ md: '8px',
+ lg: '12px'
+ },
+
+ shadow: {
+ sm: '0 1px 2px rgba(0, 0, 0, 0.4)',
+ md: '0 4px 10px rgba(0, 0, 0, 0.5)'
+ }
+ },
+
+ isProductionReady: true
+};
\ No newline at end of file
diff --git a/src/shared/theme/tokens/digital.ts b/src/shared/theme/tokens/digital.ts
new file mode 100644
index 0000000..7135466
--- /dev/null
+++ b/src/shared/theme/tokens/digital.ts
@@ -0,0 +1,27 @@
+import { type Theme } from '../types';
+import { primitives } from './primitives';
+
+export const digitalTheme: Theme = {
+ name: 'digital',
+ tokens: {
+ color: {
+ "bg-primary": '#000000',
+ "bg-secondary": '#050505',
+ "text-primary": '#00ffea',
+ "text-secondary": '#00ccaa',
+ border: primitives.colors.neutral[300],
+ danger: primitives.colors.red[500],
+ success: primitives.colors.green[500]
+ },
+ radius: {
+ sm: '2px',
+ md: '4px',
+ lg: '8px'
+ },
+ shadow: {
+ sm: '0 0 4px #00ffea',
+ md: '0 0 10px #00ffea'
+ }
+ },
+ isProductionReady: false
+};
\ No newline at end of file
diff --git a/src/shared/theme/tokens/light.ts b/src/shared/theme/tokens/light.ts
new file mode 100644
index 0000000..56674ae
--- /dev/null
+++ b/src/shared/theme/tokens/light.ts
@@ -0,0 +1,57 @@
+import { type Theme } from '../types';
+import { primitives } from './primitives';
+
+export const lightTheme: Theme = {
+ name: 'light',
+ tokens: {
+ color: {
+ // Background layers
+ "bg-primary": primitives.colors.neutral[50],
+ "bg-secondary": primitives.colors.neutral[100],
+ "bg-tertiary": primitives.colors.neutral[200],
+
+ // Text hierarchy
+ "text-primary": primitives.colors.neutral[900],
+ "text-secondary": primitives.colors.neutral[600],
+ "text-tertiary": primitives.colors.neutral[400],
+
+ // Border hierarchy
+ "border-primary": "rgba(0,0,0,0.20)",
+ "border-secondary": "rgba(0,0,0,0.12)",
+ "border-tertiary": "rgba(0,0,0,0.08)",
+
+ // --- STATUS COLORS (LIGHT THEME) ---
+
+ // Danger
+ "bg-danger": "#fde8e8",
+ "text-danger": "#b91c1c",
+ "border-danger": "#f5c2c2",
+
+ // Warning
+ "bg-warning": "#fef3c7",
+ "text-warning": "#92400e",
+ "border-warning": "#fde68a",
+
+ // Success
+ "bg-success": "#e6f4ea",
+ "text-success": "#166534",
+ "border-success": "#bbf7d0",
+
+ // Info
+ "bg-info": "#e8f1fb",
+ "text-info": "#1e3a8a",
+ "border-info": "#bfdbfe"
+ },
+ radius: {
+ sm: '4px',
+ md: '8px',
+ lg: '12px'
+ },
+ shadow: {
+ sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
+ md: '0 4px 6px rgba(0, 0, 0, 0.1)'
+ }
+ },
+ isProductionReady: true
+};
+
diff --git a/src/shared/theme/tokens/monochrome.ts b/src/shared/theme/tokens/monochrome.ts
new file mode 100644
index 0000000..e08820e
--- /dev/null
+++ b/src/shared/theme/tokens/monochrome.ts
@@ -0,0 +1,27 @@
+import { type Theme } from '../types';
+import { primitives } from './primitives';
+
+export const monochromeTheme: Theme = {
+ name: 'monochrome',
+ tokens: {
+ color: {
+ "bg-primary": '#000000',
+ "bg-secondary": '#555555',
+ "text-primary": '#ffffff',
+ "text-secondary": '#cccccc',
+ border: primitives.colors.neutral[300],
+ danger: primitives.colors.red[500],
+ success: primitives.colors.green[500]
+ },
+ radius: {
+ sm: '4px',
+ md: '8px',
+ lg: '12px'
+ },
+ shadow: {
+ sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
+ md: '0 4px 6px rgba(0, 0, 0, 0.1)'
+ }
+ },
+ isProductionReady: false,
+};
diff --git a/src/shared/theme/tokens/primitives.ts b/src/shared/theme/tokens/primitives.ts
new file mode 100644
index 0000000..6d73ad5
--- /dev/null
+++ b/src/shared/theme/tokens/primitives.ts
@@ -0,0 +1,28 @@
+export const primitives = {
+ colors: {
+ neutral: {
+ 50: '#fafafa',
+ 100: '#f5f5f5',
+ 200: '#e5e5e5',
+ 300: '#d4d4d4',
+ 400: '#a3a3a3',
+ 500: '#737373',
+ 600: '#525252',
+ 700: '#404040',
+ 800: '#262626',
+ 900: '#171717'
+ },
+ red: {
+ 500: '#ef4444'
+ },
+ green: {
+ 500: '#22c55e'
+ },
+ blue: {
+ 500: '#3b82f6'
+ },
+ amber: {
+ 500: '#f59e0b'
+ }
+ }
+};
\ No newline at end of file
diff --git a/src/shared/theme/types.ts b/src/shared/theme/types.ts
new file mode 100644
index 0000000..e603237
--- /dev/null
+++ b/src/shared/theme/types.ts
@@ -0,0 +1,65 @@
+export type ThemeName = 'light' | 'dark' | 'digital' | 'monochrome';
+
+export interface PrimitiveTokens {
+ colors: {
+ neutral: Record;
+ red: Record;
+ green: Record;
+ blue: Record;
+ amber: Record;
+ };
+}
+
+export interface SemanticTokens {
+ color: {
+ // Background
+ 'bg-primary': string;
+ 'bg-secondary': string;
+ 'bg-tertiary': string;
+
+ // Background status
+ 'bg-danger': string;
+ 'bg-warning': string;
+ 'bg-success': string;
+ 'bg-info': string;
+
+ // Text
+ 'text-primary': string;
+ 'text-secondary': string;
+ 'text-tertiary': string;
+
+ // Text status
+ 'text-danger': string;
+ 'text-warning': string;
+ 'text-success': string;
+ 'text-info': string;
+
+ // Border
+ 'border-primary': string;
+ 'border-secondary': string;
+ 'border-tertiary': string;
+
+ // Border status
+ 'border-danger': string;
+ 'border-warning': string;
+ 'border-success': string;
+ 'border-info': string;
+ };
+
+ radius: {
+ sm: string;
+ md: string;
+ lg: string;
+ };
+
+ shadow: {
+ sm: string;
+ md: string;
+ };
+}
+
+export interface Theme {
+ name: ThemeName;
+ tokens: SemanticTokens;
+ isProductionReady: boolean;
+}
\ No newline at end of file
diff --git a/src/shared/theme/useTheme.ts b/src/shared/theme/useTheme.ts
new file mode 100644
index 0000000..696cf1d
--- /dev/null
+++ b/src/shared/theme/useTheme.ts
@@ -0,0 +1,25 @@
+import { useThemeStore } from './themeStore';
+import { themeRegistry } from './themeRegistry';
+
+export const useTheme = () => {
+ const themeName = useThemeStore((s) => s.themeName);
+ const setTheme = useThemeStore((s) => s.setTheme);
+
+ const resolvedTheme =
+ themeRegistry[themeName as keyof typeof themeRegistry] ?? themeRegistry.light;
+
+ const availableThemes = Object.values(themeRegistry)
+ .filter((t) => t.isProductionReady)
+ .map((t) => t.name);
+
+ return {
+ themeName: resolvedTheme.name,
+ theme: resolvedTheme,
+ tokens: resolvedTheme.tokens,
+ setTheme,
+ availableThemes,
+ allThemes: Object.values(themeRegistry), // optional
+ isDark:
+ resolvedTheme.name === 'dark' || resolvedTheme.name === 'digital'
+ };
+};
\ No newline at end of file
diff --git a/src/views/LoginPage.tsx b/src/views/LoginPage.tsx
new file mode 100644
index 0000000..0a5672c
--- /dev/null
+++ b/src/views/LoginPage.tsx
@@ -0,0 +1,12 @@
+import LoginCard from '@/LoginCard'
+import React from 'react'
+
+const LoginPage = () => {
+ return (
+
+
+
+ )
+}
+
+export default LoginPage
\ No newline at end of file