feat: design system added

src/components/layout/AdminLayout.tsx

@@ -4,6 +4,8 @@ import type { ReactNode } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import winsooLogo from "../../assets/images/winsoo.svg";
 import { getSidebarMenuItems } from "../../constants/navigation";
+import { colors } from "../../design/tokens/colors";
+import { spacing } from "../../design/tokens/spacing";
 
 const { Header, Content, Sider } = Layout;
 const { Title } = Typography;
@@ -46,8 +48,8 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
         style={{
           height: 64,
           padding: "0 16px",
-          borderBottom: "1px solid #ECF2F8",
+          borderBottom: `1px solid ${colors.primaryLight}`,
-          background: "#233E5F",
+          background: colors.primary,
           display: "flex",
           alignItems: "center",
           justifyContent: "flex-start",
@@ -67,8 +69,8 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
         style={{
           borderInlineEnd: 0,
           paddingTop: 12,
-          background: "#ffffff",
+          background: colors.background,
-          color: "#000000",
+          color: colors.text,
         }}
         theme="light"
         className="sidebar-menu"
@@ -84,7 +86,7 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
           open={mobileOpen}
           onClose={() => setMobileOpen(false)}
           width={260}
-          bodyStyle={{ padding: 0, background: "#ffffff" }}
+          bodyStyle={{ padding: 0, background: colors.background }}
           closeIcon={null}
         >
           {sidebarContent}
@@ -98,13 +100,13 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
       <Layout>
         <Header
           style={{
-            background: "#233E5F",
+            background: colors.primary,
             height: 64,
-            padding: "0 24px",
+            padding: `0 ${spacing.lg}px`,
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            borderBottom: "1px solid #ECF2F8",
+            borderBottom: `1px solid ${colors.primaryLight}`,
           }}
         >
           {isMobile ? (
@@ -118,7 +120,7 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
                 alignItems: "center",
                 justifyContent: "center",
                 cursor: "pointer",
-                color: "#ffffff",
+                color: colors.background,
               }}
               onClick={() => setMobileOpen(true)}
               role="button"
@@ -132,7 +134,7 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
               ☰
             </div>
           ) : null}
-          <Title level={4} style={{ margin: 0, color: "#ffffff", flex: 1, textAlign: "center" }}>
+          <Title level={4} style={{ margin: 0, color: colors.background, flex: 1, textAlign: "center" }}>
             پنل ادمین وینسو
           </Title>
         </Header>
@@ -140,11 +142,11 @@ const AdminLayout = ({ children }: AdminLayoutProps) => {
         <Content style={{ margin: 24 }}>
           <div
             style={{
-              background: "#ffffff",
+              background: colors.background,
               minHeight: 280,
               borderRadius: borderRadiusLG,
-              padding: 24,
+              padding: spacing.lg,
-              border: "1px solid #ECF2F8",
+              border: `1px solid ${colors.primaryLight}`,
             }}
           >
             {children}

src/components/layout/Sidebar.tsx

@@ -1,6 +1,8 @@
 import { Menu } from 'antd';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { getSidebarMenuItems } from '../../constants/navigation';
+import { colors } from '../../design/tokens/colors';
+import { spacing } from '../../design/tokens/spacing';
 
 const Sidebar = () => {
   const navigate = useNavigate();
@@ -12,7 +14,7 @@ const Sidebar = () => {
       selectedKeys={[location.pathname]}
       items={getSidebarMenuItems()}
       onClick={({ key }) => navigate(key)}
-      style={{ height: '100%', borderInlineEnd: 0, paddingTop: 12, background: '#ffffff', color: '#000000' }}
+      style={{ height: '100%', borderInlineEnd: 0, paddingTop: spacing.sm, background: colors.background, color: colors.text }}
     />
   );
 };

src/design/theme/antdTheme.ts

@@ -0,0 +1,14 @@
+import type { ThemeConfig } from 'antd';
+import { colors } from '../tokens/colors';
+import { typography } from '../tokens/typography';
+
+export const antdTheme: ThemeConfig = {
+  token: {
+    colorPrimary: colors.primary,
+    colorText: colors.text,
+    colorTextSecondary: colors.textSecondary,
+    colorBgContainer: colors.background,
+    borderRadius: 12,
+    fontFamily: typography.fontFamily,
+  },
+};

src/design/tokens/colors.ts

@@ -0,0 +1,8 @@
+export const colors = {
+  primary: '#233E5F',
+  primaryLight: '#ECF2F8',
+  accent: '#F0642D',
+  background: '#FFFFFF',
+  text: '#000000',
+  textSecondary: '#B3B3B3',
+} as const;

src/design/tokens/index.ts

@@ -0,0 +1,3 @@
+export { colors } from './colors';
+export { spacing } from './spacing';
+export { typography } from './typography';

src/design/tokens/spacing.ts

@@ -0,0 +1,7 @@
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+} as const;

src/design/tokens/typography.ts

@@ -0,0 +1,7 @@
+export const typography = {
+  fontFamily: 'IRANSans, sans-serif',
+  fontSize: 14,
+  fontWeightRegular: 400,
+  fontWeightBold: 700,
+  lineHeight: 1.5,
+} as const;

src/main.tsx

@@ -7,26 +7,13 @@ import 'antd/dist/reset.css';
 import faIR from 'antd/locale/fa_IR';
 import { store } from './app/store';
 import { router } from './routes/router';
+import { antdTheme } from './design/theme/antdTheme';
 import './index.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Provider store={store}>
-      <ConfigProvider
+      <ConfigProvider direction="rtl" locale={faIR} theme={antdTheme}>
-        direction="rtl"
-        locale={faIR}
-        theme={{
-          token: {
-            colorPrimary: '#233E5F',
-            colorInfo: '#233E5F',
-            colorSuccess: '#233E5F',
-            borderRadius: 12,
-            fontFamily: 'IRANSans, sans-serif',
-            colorText: '#000000',
-            colorTextSecondary: '#B3B3B3',
-          },
-        }}
-      >
         <RouterProvider router={router} />
       </ConfigProvider>
     </Provider>

src/pages/Billboards/Billboards.tsx

@@ -1,4 +1,6 @@
 import { Card, Typography } from 'antd';
+import { colors } from '../../design/tokens/colors';
+import { spacing } from '../../design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 
@@ -6,7 +8,7 @@ const Billboards = () => {
   return (
     <Card bordered={false} style={{ boxShadow: 'none', padding: 0 }}>
       <Title level={2}>بیلبوردها</Title>
-      <Paragraph style={{ color: '#B3B3B3', marginTop: 8 }}>
+      <Paragraph style={{ color: colors.textSecondary, marginTop: spacing.sm }}>
         مدیریت جدول بیلبوردها به‌زودی اضافه خواهد شد.
       </Paragraph>
     </Card>

src/pages/Home/Home.tsx

@@ -1,4 +1,6 @@
 import { Card, Typography } from 'antd';
+import { colors } from '../../design/tokens/colors';
+import { spacing } from '../../design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 
@@ -6,7 +8,7 @@ const Home = () => {
   return (
     <Card bordered={false} style={{ boxShadow: 'none', padding: 0 }}>
       <Title level={2}>خوش آمدید</Title>
-      <Paragraph style={{ color: '#B3B3B3', marginTop: 8 }}>
+      <Paragraph style={{ color: colors.textSecondary, marginTop: spacing.sm }}>
         به پنل ادمین وینسو خوش آمدید.
       </Paragraph>
     </Card>

src/pages/Login/Login.tsx

@@ -1,6 +1,8 @@
 import { Button, Card, Form, Input, Typography, message } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { authService } from '../../features/auth/authService';
+import { colors } from '../../design/tokens/colors';
+import { spacing } from '../../design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 
@@ -24,12 +26,12 @@ const Login = () => {
   };
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#ECF2F8', direction: 'rtl' }}>
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: colors.primaryLight, direction: 'rtl' }}>
-      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: '1px solid #ECF2F8' }}>
+      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: `1px solid ${colors.primaryLight}` }}>
-        <Title level={3} style={{ marginBottom: 8, color: '#233E5F' }}>
+        <Title level={3} style={{ marginBottom: spacing.sm, color: colors.primary }}>
           ورود به پنل ادمین
         </Title>
-        <Paragraph style={{ color: '#B3B3B3' }}>
+        <Paragraph style={{ color: colors.textSecondary }}>
           برای ادامه شماره موبایل خود را وارد کنید.
         </Paragraph>
 

src/pages/Profile/Profile.tsx

@@ -1,4 +1,6 @@
 import { Card, Typography } from 'antd';
+import { colors } from '../../design/tokens/colors';
+import { spacing } from '../../design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 
@@ -6,7 +8,7 @@ const Profile = () => {
   return (
     <Card bordered={false} style={{ boxShadow: 'none', padding: 0 }}>
       <Title level={2}>پروفایل کاربر</Title>
-      <Paragraph style={{ color: '#B3B3B3', marginTop: 8 }}>
+      <Paragraph style={{ color: colors.textSecondary, marginTop: spacing.sm }}>
         جدول اطلاعات کاربر به‌زودی اضافه خواهد شد.
       </Paragraph>
     </Card>

src/pages/VerifyOtp/VerifyOtp.tsx

@@ -4,6 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { useAppDispatch } from '../../utils/hooks';
 import { loginSuccess } from '../../features/auth/authSlice';
 import { authService } from '../../features/auth/authService';
+import { colors } from '../../design/tokens/colors';
+import { spacing } from '../../design/tokens/spacing';
 
 const { Title, Paragraph } = Typography;
 
@@ -37,12 +39,12 @@ const VerifyOtp = () => {
   };
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#ECF2F8', direction: 'rtl' }}>
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: colors.primaryLight, direction: 'rtl' }}>
-      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: '1px solid #ECF2F8' }}>
+      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: `1px solid ${colors.primaryLight}` }}>
-        <Title level={3} style={{ marginBottom: 8, color: '#233E5F' }}>
+        <Title level={3} style={{ marginBottom: spacing.sm, color: colors.primary }}>
           تایید کد یکبار مصرف
         </Title>
-        <Paragraph style={{ color: '#B3B3B3' }}>
+        <Paragraph style={{ color: colors.textSecondary }}>
           کد تایید: 77501
         </Paragraph>