Skip to content

Commit 17fb225

Browse files
anupsingh244anupsingh244
committed
chore: cleared some unwanted theming pallate
1 parent 6f8b13c commit 17fb225

File tree

2 files changed

+41
-137
lines changed

2 files changed

+41
-137
lines changed

‎src/theme/components.ts‎

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Components, Theme } from '@mui/material/styles';
2-
import { figmaColors } from './palette';
2+
import { appColors } from './palette';
33

44
// Component style overrides to match Figma design
55
export const components: Components<Omit<Theme, 'components'>> = {
@@ -26,10 +26,10 @@ export const components: Components<Omit<Theme, 'components'>> = {
2626
background: 'transparent',
2727
},
2828
'*::-webkit-scrollbar-thumb': {
29-
backgroundColor: figmaColors.neutral[300],
29+
backgroundColor: appColors.neutral[400],
3030
borderRadius: '3px',
3131
'&:hover': {
32-
backgroundColor: figmaColors.neutral[400],
32+
backgroundColor: appColors.neutral[600],
3333
},
3434
},
3535
},
@@ -208,40 +208,6 @@ export const components: Components<Omit<Theme, 'components'>> = {
208208
},
209209
},
210210

211-
// COMMENTED OUT: Switch customizations (moved to individual Toggle component to avoid conflicts)
212-
// MuiSwitch: {
213-
// styleOverrides: {
214-
// root: {
215-
// width: '42px',
216-
// height: '26px',
217-
// padding: 0,
218-
// '& .MuiSwitch-switchBase': {
219-
// padding: 0,
220-
// margin: '2px',
221-
// transitionDuration: '300ms',
222-
// '&.Mui-checked': {
223-
// transform: 'translateX(16px)',
224-
// color: '#fff',
225-
// '& + .MuiSwitch-track': {
226-
// opacity: 1,
227-
// border: 0,
228-
// },
229-
// },
230-
// },
231-
// '& .MuiSwitch-thumb': {
232-
// boxSizing: 'border-box',
233-
// width: '22px',
234-
// height: '22px',
235-
// },
236-
// '& .MuiSwitch-track': {
237-
// borderRadius: '13px',
238-
// opacity: 1,
239-
// transition: 'background-color 300ms ease-in-out',
240-
// },
241-
// },
242-
// },
243-
// },
244-
245211
// Accordion customizations
246212
MuiAccordion: {
247213
styleOverrides: {

‎src/theme/palette.ts‎

Lines changed: 38 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,99 @@
11
import type { PaletteOptions } from '@mui/material/styles';
22

3-
// Figma Design Tokens - Replace these with your actual Figma colors
4-
const figmaColors = {
5-
// Primary Brand Colors (Update with your Figma values)
3+
// Minimized Color Palette - Essential colors only
4+
const appColors = {
5+
// Primary Brand Colors - Only essential shades
66
primary: {
7-
50: '#f0f9ff',
8-
100: '#e0f2fe',
9-
200: '#bae6fd',
10-
300: '#7dd3fc',
11-
400: '#38bdf8',
12-
500: '#0ea5e9', // Main primary
13-
600: '#0284c7',
14-
700: '#0369a1',
15-
800: '#075985',
16-
900: '#0c4a6e',
7+
light: '#38bdf8',
8+
main: '#0ea5e9',
9+
dark: '#0284c7',
1710
},
1811

19-
// Secondary Colors (Update with your Figma values)
12+
// Secondary Colors - Only essential shades
2013
secondary: {
21-
50: '#fdf4ff',
22-
100: '#fae8ff',
23-
200: '#f5d0fe',
24-
300: '#f0abfc',
25-
400: '#e879f9',
26-
500: '#d946ef', // Main secondary
27-
600: '#c026d3',
28-
700: '#a21caf',
29-
800: '#86198f',
30-
900: '#701a75',
14+
light: '#e879f9',
15+
main: '#d946ef',
16+
dark: '#c026d3',
3117
},
3218

33-
// Neutral/Gray Scale
19+
// Neutral/Gray Scale - Essential grays only
3420
neutral: {
3521
50: '#fafafa',
3622
100: '#f5f5f5',
3723
200: 'rgba(82, 82, 82, 0.13)',
38-
300: '#d4d4d4',
3924
400: '#a3a3a3',
40-
500: '#737373',
4125
600: '#525252',
42-
700: '#404040',
43-
800: '#262626',
4426
900: '#171717',
4527
},
4628

47-
// Semantic Colors
29+
// Semantic Colors - Main shades only
4830
success: {
49-
50: '#f0fdf4',
50-
100: '#dcfce7',
51-
200: '#bbf7d0',
52-
300: '#86efac',
53-
400: '#4ade80',
54-
500: '#22c55e', // Main success
55-
600: '#16a34a',
56-
700: '#15803d',
57-
800: '#166534',
58-
900: '#14532d',
31+
main: '#22c55e',
5932
},
6033

6134
warning: {
62-
50: '#fffbeb',
63-
100: '#fef3c7',
64-
200: '#fde68a',
65-
300: '#fcd34d',
66-
400: '#fbbf24',
67-
500: '#f59e0b', // Main warning
68-
600: '#d97706',
69-
700: '#b45309',
70-
800: '#92400e',
71-
900: '#78350f',
35+
main: '#f59e0b',
7236
},
7337

7438
error: {
75-
50: '#fef2f2',
76-
100: '#fee2e2',
77-
200: '#fecaca',
78-
300: '#fca5a5',
79-
400: '#f87171',
80-
500: '#ef4444', // Main error
81-
600: '#dc2626',
82-
700: '#b91c1c',
83-
800: '#991b1b',
84-
900: '#7f1d1d',
39+
main: '#ef4444',
8540
},
8641

8742
info: {
88-
50: '#eff6ff',
89-
100: '#dbeafe',
90-
200: '#bfdbfe',
91-
300: '#93c5fd',
92-
400: '#60a5fa',
93-
500: '#3b82f6', // Main info
94-
600: '#2563eb',
95-
700: '#1d4ed8',
96-
800: '#1e40af',
97-
900: '#1e3a8a',
43+
main: '#3b82f6',
9844
},
9945
};
10046

101-
// Single Theme Palette (Light/White Mode Only)
47+
// Minimized Theme Palette (Light Mode Only)
10248
export const appPalette: PaletteOptions = {
10349
mode: 'light',
10450
primary: {
105-
main: figmaColors.primary[500],
106-
light: figmaColors.primary[400],
107-
dark: figmaColors.primary[600],
51+
main: appColors.primary.main,
52+
light: appColors.primary.light,
53+
dark: appColors.primary.dark,
10854
contrastText: '#ffffff',
10955
},
11056
secondary: {
111-
main: figmaColors.secondary[500],
112-
light: figmaColors.secondary[400],
113-
dark: figmaColors.secondary[600],
57+
main: appColors.secondary.main,
58+
light: appColors.secondary.light,
59+
dark: appColors.secondary.dark,
11460
contrastText: '#ffffff',
11561
},
11662
error: {
117-
main: figmaColors.error[500],
118-
light: figmaColors.error[400],
119-
dark: figmaColors.error[600],
63+
main: appColors.error.main,
12064
contrastText: '#ffffff',
12165
},
12266
warning: {
123-
main: figmaColors.warning[500],
124-
light: figmaColors.warning[400],
125-
dark: figmaColors.warning[600],
67+
main: appColors.warning.main,
12668
contrastText: '#ffffff',
12769
},
12870
info: {
129-
main: figmaColors.info[500],
130-
light: figmaColors.info[400],
131-
dark: figmaColors.info[600],
71+
main: appColors.info.main,
13272
contrastText: '#ffffff',
13373
},
13474
success: {
135-
main: figmaColors.success[500],
136-
light: figmaColors.success[400],
137-
dark: figmaColors.success[600],
75+
main: appColors.success.main,
13876
contrastText: '#ffffff',
13977
},
140-
grey: figmaColors.neutral,
78+
grey: appColors.neutral,
14179
background: {
14280
default: '#E9E8ED',
14381
paper: '#E9E8ED',
14482
},
14583
text: {
146-
primary: figmaColors.neutral[900],
147-
secondary: figmaColors.neutral[600],
148-
disabled: figmaColors.neutral[400],
84+
primary: appColors.neutral[900],
85+
secondary: appColors.neutral[600],
86+
disabled: appColors.neutral[400],
14987
},
150-
divider: figmaColors.neutral[200],
88+
divider: appColors.neutral[200],
15189
action: {
152-
active: figmaColors.neutral[600],
153-
hover: figmaColors.neutral[50],
154-
selected: figmaColors.neutral[100],
155-
disabled: figmaColors.neutral[300],
156-
disabledBackground: figmaColors.neutral[100],
90+
active: appColors.neutral[600],
91+
hover: appColors.neutral[50],
92+
selected: appColors.neutral[100],
93+
disabled: appColors.neutral[400],
94+
disabledBackground: appColors.neutral[100],
15795
},
15896
};
15997

16098
// Export the color tokens for use in components
161-
export { figmaColors };
99+
export { appColors };

0 commit comments

Comments
 (0)