amir/Account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6 from rkheftan/chore/theme

Browse Source 
chore: update theme with new theme from design
This commit is contained in:
SajadMRjl
2025-07-23 14:03:30 +03:30
committed by GitHub
parent 81904f7fd6 0e537aa5ef
commit bcb71666fa
3 changed files with 60 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/App.tsx
View File

@@ -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>
<p>The main content and router will go here.</p>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<Typography variant="h3">{t('helloWorld')}</Typography>
<Box
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>
</>

188
src/theme/colorTmp.ts
View File

@@ -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',
},
},
};

70
src/theme/colors.ts
View File

@@ -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',
dark: '#000000',
light: '#616161',
main: blue[500],
dark: blue[700],
light: blue[100],
contrastText: '#FFFFFF',
},
// TODO
dark: {
main: '#64b5f6',
light: '#90caf9',
dark: '#42a5f5',
contrastText: 'rgba(0, 0, 0, 0.87)',
main: blue[300],
light: blue[100],
dark: blue[500],
contrastText: '#FFFFFF',
},
},
secondary: {
light: {
main: '#FF5722',
dark: '#E64A19',
light: '#FF8A65',
main: grey[900],
dark: '#000000',
light: grey[700],
contrastText: '#FFFFFF',
},
// TODO
dark: {
main: '#ce93d8',
light: '#f3e5f5',
dark: '#ab47bc',
contrastText: 'rgba(0, 0, 0, 0.87)',
main: grey[300],
light: grey[100],
dark: grey[500],
contrastText: '#000000',
},
},
action: {
@@ -55,12 +54,11 @@ export const PALETTE: Palette = {
light: '#EF5350',
contrastText: '#FFFFFF',
},
// TODO
dark: {
main: '#E53935',
dark: '#C62828',
light: '#EF5350',
contrastText: '#FFFFFF',
main: '#EF9A9A',
dark: '#E57373',
light: '#FFCDD2',
contrastText: '#000000',
},
},
warning: {
@@ -70,12 +68,11 @@ export const PALETTE: Palette = {
light: '#FF9800',
contrastText: '#FFFFFF',
},
// TODO
dark: {
main: '#EF6C00',
dark: '#E65100',
light: '#FF9800',
contrastText: '#FFFFFF',
main: '#FFB74D',
dark: '#FFA726',
light: '#FFE0B2',
contrastText: '#000000',
},
},
info: {
@@ -85,12 +82,11 @@ export const PALETTE: Palette = {
light: '#4FC3F7',
contrastText: '#FFFFFF',
},
// TODO
dark: {
main: '#29B6F6',
dark: '#0288D1',
light: '#4FC3F7',
contrastText: '#FFFFFF',
main: '#81D4FA',
dark: '#4FC3F7',
light: '#E1F5FE',
contrastText: '#000000',
},
},
success: {
@@ -102,16 +98,16 @@ export const PALETTE: Palette = {
},
// TODO
dark: {
main: '#43A047',
dark: '#1B5E20',
light: '#81C784',
contrastText: '#FFFFFF',
main: '#A5D6A7',
dark: '#66BB6A',
light: '#C8E6C9',
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',
},
},