chore: update theme with new theme from design

src/App.tsx

@@ -1,4 +1,11 @@
-import { Box, CssBaseline, TextField, useColorScheme } from '@mui/material';
+import {
+  Alert,
+  Box,
+  CssBaseline,
+  TextField,
+  Typography,
+  useColorScheme,
+} from '@mui/material';
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
@@ -11,11 +18,27 @@ function App() {
       <CssBaseline />
       <LanguageManager />
       <div style={{ padding: '16px' }}>
-        <h1>{t('helloWorld')}</h1>
+        <Typography variant="h3">{t('helloWorld')}</Typography>
-        <p>The main content and router will go here.</p>
+        <Box
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          sx={{ display: 'flex', flexDirection: 'column', gap: '10px', mt: 5 }}
+        >
           <ThemeToggleButton />
+          <Button color="secondary" variant="contained">
+            secondary button
+          </Button>
           <TextField label={t('helloWorld')} />
+          <Alert severity="success" variant="filled">
+            success
+          </Alert>
+          <Alert severity="warning" variant="filled">
+            warning
+          </Alert>
+          <Alert severity="info" variant="filled">
+            info
+          </Alert>
+          <Alert severity="error" variant="filled">
+            error
+          </Alert>
         </Box>
       </div>
     </>

src/theme/colorTmp.ts

@@ -1,188 +0,0 @@
-export const PALETTE = {
-  primary: {
-    light: {
-      main: '#212121',
-      dark: '#000000',
-      light: '#616161',
-      contrastText: '#FFFFFF',
-      hover: '#21212104',
-      selected: '#21212108',
-      focus: '#21212112',
-      focusVisible: '#21212130',
-      outlinedBorder: '#21212150',
-    },
-    // TODO
-    dark: {
-      main: '#64b5f6',
-      light: '#90caf9',
-      dark: '#42a5f5',
-      contrastText: 'rgba(0, 0, 0, 0.87)',
-    },
-  },
-  secondary: {
-    light: {
-      main: '#FF5722',
-      dark: '#E64A19',
-      light: '#FF8A65',
-      contrastText: '#FFFFFF',
-      hover: '#FF572204',
-      selected: '#FF572208',
-      focus: '#FF572212',
-      focusVisible: '#FF572230',
-      outlinedBorder: '#FF572250',
-    },
-    // TODO
-    dark: {
-      main: '#ce93d8',
-      light: '#f3e5f5',
-      dark: '#ab47bc',
-      contrastText: 'rgba(0, 0, 0, 0.87)',
-    },
-  },
-  action: {
-    light: {
-      action: '#00000056',
-      hover: '#00000004',
-      selected: '#00000008',
-      focus: '#00000012',
-      disabled: '#00000038',
-      disabledBackground: '#00000012',
-    },
-    // TODO
-    dark: {
-      action: '#FFFFFF56',
-      hover: '#FFFFFF04',
-      selected: '#FFFFFF08',
-      focus: '#FFFFFF12',
-      disabled: '#FFFFFF38',
-      disabledBackground: '#FFFFFF12',
-    },
-  },
-  error: {
-    light: {
-      main: '#E53935',
-      dark: '#C62828',
-      light: '#EF5350',
-      contrast: '#FFFFFF',
-      hover: '#D32F2F04',
-      selected: '#D32F2F08',
-      focusVisible: '#D32F2F30',
-      outlinedBorder: '#D32F2F50',
-    },
-    // TODO
-    dark: {
-      main: '#E53935',
-      dark: '#C62828',
-      light: '#EF5350',
-      contrast: '#FFFFFF',
-      hover: '#D32F2F04',
-      selected: '#D32F2F08',
-      focusVisible: '#D32F2F30',
-      outlinedBorder: '#D32F2F50',
-    },
-  },
-  warning: {
-    light: {
-      main: '#EF6C00',
-      dark: '#E65100',
-      light: '#FF9800',
-      contrast: '#FFFFFF',
-      hover: '#EF6C0004',
-      selected: '#EF6C0008',
-      focusVisible: '#EF6C0030',
-      outlinedBorder: '#EF6C0050',
-    },
-    // TODO
-    dark: {
-      main: '#EF6C00',
-      dark: '#E65100',
-      light: '#FF9800',
-      contrast: '#FFFFFF',
-      hover: '#EF6C0004',
-      selected: '#EF6C0008',
-      focusVisible: '#EF6C0030',
-      outlinedBorder: '#EF6C0050',
-    },
-  },
-  info: {
-    light: {
-      main: '#29B6F6',
-      dark: '#0288D1',
-      light: '#4FC3F7',
-      contrast: '#FFFFFF',
-      hover: '#0288D104',
-      selected: '#0288D108',
-      focusVisible: '#0288D130',
-      outlinedBorder: '#0288D150',
-    },
-    // TODO
-    dark: {
-      main: '#29B6F6',
-      dark: '#0288D1',
-      light: '#4FC3F7',
-      contrast: '#FFFFFF',
-      hover: '#0288D104',
-      selected: '#0288D108',
-      focusVisible: '#0288D130',
-      outlinedBorder: '#0288D150',
-    },
-  },
-  success: {
-    light: {
-      main: '#43A047',
-      dark: '#1B5E20',
-      light: '#81C784',
-      contrast: '#FFFFFF',
-      hover: '#2E7D3204',
-      selected: '#2E7D3208',
-      focusVisible: '#2E7D3230',
-      outlinedBorder: '#2E7D3250',
-    },
-    // TODO
-    dark: {
-      main: '#43A047',
-      dark: '#1B5E20',
-      light: '#81C784',
-      contrast: '#FFFFFF',
-      hover: '#2E7D3204',
-      selected: '#2E7D3208',
-      focusVisible: '#2E7D3230',
-      outlinedBorder: '#2E7D3250',
-    },
-  },
-  // Background colors
-  background: {
-    light: {
-      default: '#FAFAFA',
-    },
-    dark: {
-      default: '#121212',
-    },
-  },
-  // Text colors
-  text: {
-    light: {
-      primary: '#000000',
-      secondary: '#424242',
-      tertiary: '#757575',
-      disabled: '#00000038',
-      hover: '#00000004',
-      selected: '#00000008',
-      divider: '#E0E0E0',
-      focus: '#00000012',
-      focusVisible: '#00000030',
-    },
-    // TODO
-    dark: {
-      primary: '#FFFFFF',
-      secondary: '#424242',
-      tertiary: '#757575',
-      disabled: '#FFFFFF38',
-      hover: '#FFFFFF04',
-      selected: '#FFFFFF08',
-      divider: '#E0E0E0',
-      focus: '#FFFFFF12',
-      focusVisible: '#FFFFFF30',
-    },
-  },
-};

src/theme/colors.ts

@@ -1,34 +1,33 @@
+import { blue, grey } from '@mui/material/colors';
 import type { Palette } from './color.type';
 
 export const PALETTE: Palette = {
   primary: {
     light: {
-      main: '#212121',
+      main: blue[500],
-      dark: '#000000',
+      dark: blue[700],
-      light: '#616161',
+      light: blue[100],
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#64b5f6',
+      main: blue[300],
-      light: '#90caf9',
+      light: blue[100],
-      dark: '#42a5f5',
+      dark: blue[500],
-      contrastText: 'rgba(0, 0, 0, 0.87)',
+      contrastText: '#FFFFFF',
     },
   },
   secondary: {
     light: {
-      main: '#FF5722',
+      main: grey[900],
-      dark: '#E64A19',
+      dark: '#000000',
-      light: '#FF8A65',
+      light: grey[700],
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#ce93d8',
+      main: grey[300],
-      light: '#f3e5f5',
+      light: grey[100],
-      dark: '#ab47bc',
+      dark: grey[500],
-      contrastText: 'rgba(0, 0, 0, 0.87)',
+      contrastText: '#000000',
     },
   },
   action: {
@@ -55,12 +54,11 @@ export const PALETTE: Palette = {
       light: '#EF5350',
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#E53935',
+      main: '#EF9A9A',
-      dark: '#C62828',
+      dark: '#E57373',
-      light: '#EF5350',
+      light: '#FFCDD2',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   warning: {
@@ -70,12 +68,11 @@ export const PALETTE: Palette = {
       light: '#FF9800',
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#EF6C00',
+      main: '#FFB74D',
-      dark: '#E65100',
+      dark: '#FFA726',
-      light: '#FF9800',
+      light: '#FFE0B2',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   info: {
@@ -85,12 +82,11 @@ export const PALETTE: Palette = {
       light: '#4FC3F7',
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#29B6F6',
+      main: '#81D4FA',
-      dark: '#0288D1',
+      dark: '#4FC3F7',
-      light: '#4FC3F7',
+      light: '#E1F5FE',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   success: {
@@ -102,16 +98,16 @@ export const PALETTE: Palette = {
     },
     // TODO
     dark: {
-      main: '#43A047',
+      main: '#A5D6A7',
-      dark: '#1B5E20',
+      dark: '#66BB6A',
-      light: '#81C784',
+      light: '#C8E6C9',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   // Background colors
   background: {
     light: {
-      default: '#FAFAFA',
+      default: grey[100],
     },
     dark: {
       default: '#121212',
@@ -127,7 +123,7 @@ export const PALETTE: Palette = {
     // TODO
     dark: {
       primary: '#FFFFFF',
-      secondary: '#424242',
+      secondary: '#B0BEC5',
       disabled: '#FFFFFF38',
     },
   },