Skip to content

Commit 3973f13

Browse files
saurabhraghuvanshiisaurabhraghuvanshii
committed
resolved merge and lint other file
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
1 parent bd91300 commit 3973f13

4 files changed

Lines changed: 355 additions & 373 deletions

File tree

‎src/custom/Modal/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/B
55
import { iconLarge } from '../../constants/iconsSizes';
66
import { CloseIcon, FullScreenIcon } from '../../icons';
77
import FullScreenExitIcon from '../../icons/Fullscreen/FullScreenExitIcon';
8-
import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
98
import { CustomTooltip } from '../CustomTooltip';
109
import { HelperTextPopover } from '../HelperTextPopover';
1110

@@ -132,10 +131,7 @@ export const ModalBody = styled(Paper)(({ theme }) => ({
132131
const StyledFooter = styled('div', {
133132
shouldForwardProp: (prop) => prop !== 'variant'
134133
})<ModalFooterProps>(({ theme, variant, hasHelpText }) => ({
135-
background:
136-
variant === 'filled'
137-
? (theme.palette.surface.tint)
138-
: 'transparent',
134+
background: variant === 'filled' ? theme.palette.surface.tint : 'transparent',
139135
display: 'flex',
140136
alignItems: 'center',
141137
justifyContent: hasHelpText ? 'space-between' : 'end',

‎src/theme/ThemeProvider.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { EmotionCache } from '@emotion/react';
2-
import { CssBaseline, PaletteMode, Theme, ThemeProvider } from '@mui/material';
2+
import { CssBaseline, PaletteMode, Theme, ThemeProvider } from '@mui/material';
33
import React from 'react';
4-
import { createCustomTheme,PrimitivePalette } from './theme';
4+
import { createCustomTheme, PrimitivePalette } from './theme';
55

66
interface SistentProviderContextType {
77
emotionCache?: EmotionCache;
@@ -23,7 +23,7 @@ function SistentThemeProvider({
2323
customTheme
2424
}: SistentThemeProviderProps): JSX.Element {
2525
const theme = React.useMemo<Theme>(
26-
() => createCustomTheme(initialMode, customTheme ),
26+
() => createCustomTheme(initialMode, customTheme),
2727
[initialMode, customTheme]
2828
);
2929
return (

‎src/theme/palette.ts‎

Lines changed: 102 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -170,70 +170,68 @@ declare module '@mui/material/styles' {
170170
};
171171
};
172172
}
173-
174-
// surface tokens need to have enough contrast
175-
// with text and interactive elements
176-
type SurfaceTokens = {
177-
178-
/** main page background, content containers (pure bg color) */
179-
primary: string;
180-
181-
/** secondary surfaces (slightly darker bg) */
182-
secondary: string;
183-
184-
/** tertiary surfaces (even darker bg) */
185-
tertiary: string;
186-
187-
/** floating elements with depth (bg + shadow) */
188-
elevated: string;
189-
190-
/** modal backdrops (semi-transparent bg) */
191-
overlay: string;
192-
193-
/** highlight surfaces (eg. modal headers , tabs, ) */
194-
tint: string;
195-
196-
/** high contrast alternative (fg as bg) */
197-
inverse: string;
198-
}
199173

200-
type InteractiveTokens = {
201-
/** default interactive elements (primary color) */
202-
primary: string;
203-
204-
/** hover state for interactive elements (primary hover tint) */
205-
hover: string;
206-
207-
/** disabled state for interactive elements (primary disabled tint) */
208-
disabled?: string;
209-
210-
/** pressed state for interactive elements (primary pressed tint) */
211-
pressed: string;
212-
213-
/** secondary interactive elements (secondary color) */
214-
secondary: string;
215-
216-
/** tertiary interactive elements (tertiary color) */
217-
tertiary: string;
218-
};
174+
// surface tokens need to have enough contrast
175+
// with text and interactive elements
176+
type SurfaceTokens = {
177+
/** main page background, content containers (pure bg color) */
178+
primary: string;
219179

220-
type NavigationTokens = {
221-
/** main navigation bar background */
222-
primary: string;
223-
224-
/** secondary navigation bar background */
225-
secondary: string;
180+
/** secondary surfaces (slightly darker bg) */
181+
secondary: string;
226182

227-
/** active navigation item background */
228-
active: string;
183+
/** tertiary surfaces (even darker bg) */
184+
tertiary: string;
229185

230-
/** hover state for navigation items */
231-
hover: string;
232-
};
186+
/** floating elements with depth (bg + shadow) */
187+
elevated: string;
188+
189+
/** modal backdrops (semi-transparent bg) */
190+
overlay: string;
191+
192+
/** highlight surfaces (eg. modal headers , tabs, ) */
193+
tint: string;
194+
195+
/** high contrast alternative (fg as bg) */
196+
inverse: string;
197+
};
198+
199+
type InteractiveTokens = {
200+
/** default interactive elements (primary color) */
201+
primary: string;
202+
203+
/** hover state for interactive elements (primary hover tint) */
204+
hover: string;
205+
206+
/** disabled state for interactive elements (primary disabled tint) */
207+
disabled?: string;
208+
209+
/** pressed state for interactive elements (primary pressed tint) */
210+
pressed: string;
211+
212+
/** secondary interactive elements (secondary color) */
213+
secondary: string;
214+
215+
/** tertiary interactive elements (tertiary color) */
216+
tertiary: string;
217+
};
218+
219+
type NavigationTokens = {
220+
/** main navigation bar background */
221+
primary: string;
222+
223+
/** secondary navigation bar background */
224+
secondary: string;
225+
226+
/** active navigation item background */
227+
active: string;
228+
229+
/** hover state for navigation items */
230+
hover: string;
231+
};
233232

234233
// Defines the options available for the palette.
235234
interface PaletteOptions {
236-
237235
surface: SurfaceTokens;
238236
interactive: InteractiveTokens;
239237
navigation: NavigationTokens;
@@ -266,37 +264,34 @@ type NavigationTokens = {
266264
}
267265
}
268266

269-
export type ThemePalette = PaletteOptions
270-
271-
267+
export type ThemePalette = PaletteOptions;
272268

273269
export const lightModePalette: PaletteOptions = {
270+
surface: {
271+
primary: Colors.charcoal[100],
272+
secondary: Colors.charcoal[90],
273+
tertiary: Colors.charcoal[80],
274+
elevated: Colors.WHITE,
275+
overlay: alpha(Colors.charcoal[90], 0.8),
276+
inverse: Colors.charcoal[10],
277+
tint: `linear-gradient(90deg, ${Colors.TEAL_BLUE} 0%, ${Colors.DARK_TEAL} 100%)`
278+
},
274279

275-
surface: {
276-
primary: Colors.charcoal[100],
277-
secondary: Colors.charcoal[90],
278-
tertiary: Colors.charcoal[80],
279-
elevated: Colors.WHITE,
280-
overlay: alpha(Colors.charcoal[90], 0.8),
281-
inverse: Colors.charcoal[10],
282-
tint: `linear-gradient(90deg, ${Colors.TEAL_BLUE} 0%, ${Colors.DARK_TEAL} 100%)`
283-
} ,
284-
285-
interactive: {
286-
primary: Colors.KEPPEL,
287-
hover: Colors.keppel[50],
288-
disabled: Colors.charcoal[90],
289-
pressed: Colors.keppel[60],
290-
secondary: Colors.keppel[40],
291-
tertiary: Colors.keppel[70]
292-
},
280+
interactive: {
281+
primary: Colors.KEPPEL,
282+
hover: Colors.keppel[50],
283+
disabled: Colors.charcoal[90],
284+
pressed: Colors.keppel[60],
285+
secondary: Colors.keppel[40],
286+
tertiary: Colors.keppel[70]
287+
},
293288

294-
navigation: {
295-
primary: "#252e31",
296-
secondary: "#294957",
297-
active: Colors.KEPPEL,
298-
hover: Colors.keppel[50]
299-
},
289+
navigation: {
290+
primary: '#252e31',
291+
secondary: '#294957',
292+
active: Colors.KEPPEL,
293+
hover: Colors.keppel[50]
294+
},
300295

301296
primary: {
302297
main: Colors.KEPPEL
@@ -425,31 +420,30 @@ export const lightModePalette: PaletteOptions = {
425420
};
426421

427422
export const darkModePalette: PaletteOptions = {
423+
surface: {
424+
primary: Colors.charcoal[10],
425+
secondary: Colors.charcoal[20],
426+
tertiary: Colors.charcoal[30],
427+
elevated: Colors.charcoal[40],
428+
overlay: alpha(Colors.charcoal[20], 0.8),
429+
inverse: Colors.WHITE,
430+
tint: `linear-gradient(90deg, ${Colors.charcoal[30]} 0%, ${Colors.accentGrey[30]} 100%)`
431+
},
432+
interactive: {
433+
primary: Colors.KEPPEL,
434+
hover: Colors.keppel[50],
435+
disabled: Colors.charcoal[30],
436+
pressed: Colors.keppel[60],
437+
secondary: Colors.keppel[20],
438+
tertiary: Colors.keppel[10]
439+
},
428440

429-
surface: {
430-
primary: Colors.charcoal[10],
431-
secondary: Colors.charcoal[20],
432-
tertiary: Colors.charcoal[30],
433-
elevated: Colors.charcoal[40],
434-
overlay: alpha(Colors.charcoal[20], 0.8),
435-
inverse: Colors.WHITE,
436-
tint: `linear-gradient(90deg, ${Colors.charcoal[30]} 0%, ${Colors.accentGrey[30]} 100%)`,
437-
},
438-
interactive: {
439-
primary: Colors.KEPPEL,
440-
hover: Colors.keppel[50],
441-
disabled: Colors.charcoal[30],
442-
pressed: Colors.keppel[60],
443-
secondary: Colors.keppel[20],
444-
tertiary: Colors.keppel[10]
445-
},
446-
447-
navigation: {
448-
primary: Colors.charcoal[10],
449-
secondary: Colors.charcoal[20],
450-
active: Colors.KEPPEL,
451-
hover: Colors.keppel[50]
452-
},
441+
navigation: {
442+
primary: Colors.charcoal[10],
443+
secondary: Colors.charcoal[20],
444+
active: Colors.KEPPEL,
445+
hover: Colors.keppel[50]
446+
},
453447

454448
primary: {
455449
main: Colors.KEPPEL

0 commit comments

Comments
 (0)