Skip to content

Commit 897d6ab

Browse files
aabidsofi19aabidsofi19
authored
Merge pull request #546 from sudhanshutech/theme/refactor
[Theme] Refactor theme in components and list all tokens
2 parents be989e1 + ae8a8e3 commit 897d6ab

33 files changed

+954
-389
lines changed

‎src/base/Collapse/Collapse.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Collapse as MuiCollapse, CollapseProps as MuiCollapseProps } from '@mui/material';
2+
3+
export function Collapse(props: MuiCollapseProps): JSX.Element {
4+
return <MuiCollapse {...props} />;
5+
}

‎src/base/Collapse/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { CollapseProps } from '@mui/material';
2+
import { Collapse } from './Collapse';
3+
4+
export { Collapse };
5+
export type { CollapseProps };

‎src/base/CssBaseLine/CssBaseLine.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {
2+
CssBaseline as MuiCssBaseline,
3+
CssBaselineProps as MuiCssBaselineProps
4+
} from '@mui/material';
5+
6+
export function CssBaseline(props: MuiCssBaselineProps): JSX.Element {
7+
return <MuiCssBaseline {...props} />;
8+
}

‎src/base/CssBaseLine/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { CssBaselineProps } from '@mui/material';
2+
import { CssBaseline } from './CssBaseLine';
3+
4+
export { CssBaseline };
5+
export type { CssBaselineProps };

‎src/base/ListItemText/ListItemText.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {
2+
ListItemText as MuiListItemText,
3+
ListItemTextProps as MuiListItemTextProps
4+
} from '@mui/material';
5+
6+
export function ListItemText(props: MuiListItemTextProps): JSX.Element {
7+
return <MuiListItemText {...props} />;
8+
}

‎src/base/ListItemText/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ListItemTextProps } from '@mui/material';
2+
import { ListItemText } from './ListItemText';
3+
4+
export { ListItemText };
5+
export type { ListItemTextProps };

‎src/base/OutlinedInput/OutlinedInput.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {
2+
OutlinedInput as MuiOutlinedInput,
3+
OutlinedInputProps as MuiOutlinedInputProps
4+
} from '@mui/material';
5+
6+
export function OutlinedInput(props: MuiOutlinedInputProps): JSX.Element {
7+
return <MuiOutlinedInput {...props} />;
8+
}

‎src/base/OutlinedInput/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { OutlinedInputProps } from '@mui/material';
2+
import { OutlinedInput } from './OutlinedInput';
3+
4+
export { OutlinedInput };
5+
export type { OutlinedInputProps };

‎src/base/index.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ export * from './Checkbox';
1919
export * from './Chip';
2020
export * from './CircularProgress';
2121
export * from './ClickAwayListener';
22+
export * from './Collapse';
2223
export * from './Container';
24+
export * from './CssBaseLine';
2325
export * from './Dialog';
2426
export * from './DialogActions';
2527
export * from './DialogContent';
@@ -41,10 +43,12 @@ export * from './ListItemAvatar';
4143
export * from './ListItemButton';
4244
export * from './ListItemIcon';
4345
export * from './ListItemSecondaryAction';
46+
export * from './ListItemText';
4447
export * from './ListSubheader';
4548
export * from './Menu';
4649
export * from './MenuItem';
4750
export * from './MenuList';
51+
export * from './OutlinedInput';
4852
export * from './Pagination';
4953
export * from './Paper';
5054
export * from './Popper';

‎src/custom/ErrorBoundary/ErrorBoundary.tsx

+15-17
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
1-
import { styled } from '@mui/system';
1+
import { styled } from '@mui/material';
22
import React from 'react';
33
import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
44
import { Box } from '../../base/Box';
55
import { Link } from '../../base/Link';
66
import { Typography } from '../../base/Typography';
7-
import { BLACK, KEPPEL } from '../../theme/colors';
8-
import { DARK_JUNGLE_GREEN } from '../../theme/colors/colors';
97

10-
const ErrorMessage = styled(Typography)(() => ({
11-
color: BLACK,
8+
const ErrorMessage = styled(Typography)(({ theme }) => ({
9+
color: theme.palette.text.default,
1210
fontWeight: 'normal',
1311
marginTop: '2px',
1412
marginBottom: '2px',
1513
fontSize: '1.15rem'
1614
}));
1715

18-
const StyledLink = styled(Link)(() => ({
19-
color: KEPPEL,
16+
const StyledLink = styled(Link)(({ theme }) => ({
17+
color: theme.palette.border.brand,
2018
textDecoration: 'underline',
2119
cursor: 'pointer'
2220
}));
2321

22+
const CodeMessage = styled('div')(({ theme }) => ({
23+
backgroundColor: theme.palette.background.code,
24+
color: theme.palette.text.tertiary,
25+
padding: '.85rem',
26+
borderRadius: '.2rem',
27+
marginBlock: '.5rem'
28+
}));
29+
2430
interface FallbackComponentProps extends FallbackProps {
2531
resetErrorBoundary: () => void;
2632
children?: React.ReactNode;
@@ -30,17 +36,9 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme
3036
return (
3137
<div role="alert">
3238
<h2>Uh-oh!😔 Please pardon the mesh.</h2>
33-
<div
34-
style={{
35-
backgroundColor: DARK_JUNGLE_GREEN,
36-
color: '#FFFFFF',
37-
padding: '.85rem',
38-
borderRadius: '.2rem',
39-
marginBlock: '.5rem'
40-
}}
41-
>
39+
<CodeMessage>
4240
<code>{(error as Error).message}</code>
43-
</div>
41+
</CodeMessage>
4442
<ErrorMessage>
4543
We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
4644
work, please check out our support channels{' '}

‎src/custom/ModalCard/style.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@ import {
44
BLACK,
55
BUTTON_MODAL,
66
BUTTON_MODAL_DARK,
7-
CULTURED,
8-
NOT_FOUND,
97
SLIGHT_BLACK_2,
10-
SLIGHT_BLUE,
11-
WHITE
8+
SLIGHT_BLUE
129
} from '../../theme/colors/colors';
1310

1411
export const ContentContainer = styled('div')(({ theme }) => ({
15-
backgroundColor: theme.palette.mode === 'light' ? WHITE : NOT_FOUND
12+
backgroundColor: theme.palette.background.default
1613
}));
1714

1815
export const ModalWrapper = styled('div')(() => ({
@@ -42,13 +39,15 @@ export const HeaderModal = styled('div')(({ theme }) => {
4239
const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
4340
const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
4441

42+
const iconColor = theme.palette.icon?.inverse;
43+
4544
return {
4645
display: 'flex',
4746
borderRadius: '5px 5px 0px 0px',
4847
justifyContent: 'space-between',
4948
padding: '11px 16px',
5049
height: '52px',
51-
fill: CULTURED,
50+
fill: iconColor,
5251
boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
5352
background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
5453
filter:

‎src/custom/TooltipIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Tooltip from '../patches/Tooltip';
55

66
interface TooltipIconProps {
77
title: string;
8-
onClick: (event: React.MouseEvent<HTMLElement>) => void;
8+
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
99
icon: React.ReactNode;
1010
arrow?: boolean;
1111
style?: React.CSSProperties;

‎src/custom/TransferModal/TransferList/style.tsx

+15-17
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
import { styled } from '@mui/material';
22
import { Button, Chip, Grid, Paper, Typography } from '../../../base';
3-
import { ALICE_BLUE, BLACK, DARK_TEAL, KEPPEL, WHITE, accentGrey } from '../../../theme';
4-
import { STEEL_GRAY } from '../../../theme/colors/colors';
53

6-
export const StyledChip = styled(Chip)({
4+
export const StyledChip = styled(Chip)(({ theme }) => ({
75
padding: '5px 6px !important',
8-
color: BLACK,
6+
color: theme.palette.text.default,
97
fontSize: '0.875rem',
108
textTransform: 'uppercase',
119
fontWeight: 400,
1210
height: 'unset',
1311
borderRadius: '100px',
14-
border: `0.5px solid ${accentGrey[40]}`,
15-
background: WHITE,
12+
border: `0.5px solid ${theme.palette.border?.normal}`,
13+
background: theme.palette.background.default,
1614
maxWidth: '14.375rem'
17-
});
15+
}));
1816

19-
export const StyledPaper = styled(Paper)({
17+
export const StyledPaper = styled(Paper)(({ theme }) => ({
2018
width: 300,
2119
height: 280,
2220
overflow: 'auto',
23-
backgroundColor: ALICE_BLUE,
21+
backgroundColor: theme.palette.background.blur?.heavy,
2422
borderRadius: '10px',
2523
boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.25) inset',
2624
'@media (max-width: 843px)': {
@@ -32,26 +30,26 @@ export const StyledPaper = styled(Paper)({
3230
'@media (max-width: 375px)': {
3331
width: '100%'
3432
}
35-
});
33+
}));
3634

37-
export const ListHeading = styled(Typography)({
35+
export const ListHeading = styled(Typography)(({ theme }) => ({
3836
paddingBottom: '15px',
39-
color: STEEL_GRAY,
37+
color: theme.palette.text?.default,
4038
textAlign: 'center',
4139
fontSize: '1rem',
4240
letterSpacing: '0.15px'
43-
});
41+
}));
4442

45-
export const TransferButton = styled(Button)({
43+
export const TransferButton = styled(Button)(({ theme }) => ({
4644
margin: '5px 0',
4745
padding: '7px 0',
4846
borderRadius: '10px',
49-
borderColor: DARK_TEAL,
47+
borderColor: theme.palette.border?.strong,
5048
boxShadow: 'none',
5149
'&:hover': {
52-
borderColor: KEPPEL
50+
borderColor: theme.palette.border?.brand
5351
}
54-
});
52+
}));
5553

5654
export const ListGrid = styled(Grid)({
5755
padding: '0 1rem',

‎src/theme/README.md

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Sistent Theme Palette
2+
3+
This document provides an overview of the custom palette used for theme components.
4+
5+
## Palette Options
6+
7+
### Interactiveness
8+
9+
Defines the interaction color options used in the palette.
10+
11+
- `default`: Default interaction color.
12+
- `hover`: Color on hover.
13+
- `disabled`: Color when disabled (optional).
14+
- `pressed`: Color when pressed.
15+
- `secondary`: Secondary interaction color.
16+
- `tertiary`: Tertiary interaction color.
17+
18+
### TypeBackground
19+
20+
Defines the extended background color options used in the palette.
21+
22+
- `secondary`: Secondary background color.
23+
- `graphics`: Graphics background color.
24+
- `tertiary`: Tertiary background color.
25+
- `hover`: Hover background color.
26+
- `blur`: Blur effect colors (heavy and light).
27+
- `brand`: Brand interaction colors.
28+
- `cta`: Call to action interaction colors.
29+
- `info`: Information interaction colors.
30+
- `success`: Success interaction colors.
31+
- `warning`: Warning interaction colors.
32+
- `error`: Error interaction colors.
33+
- `code`: Code background color.
34+
35+
To add a new background color, add a new key to the `TypeBackground` type and update the `background` property in the `PaletteColor` type.
36+
37+
### TypeText
38+
39+
Defines the extended text color options used in the palette.
40+
41+
- `default`: Default text color.
42+
- `secondary`: Secondary text color.
43+
- `tertiary`: Tertiary text color.
44+
- `inverse`: Inverse text color.
45+
- `brand`: Brand text color.
46+
- `info`: Information text color.
47+
- `success`: Success text color.
48+
- `warning`: Warning text color.
49+
- `error`: Error text color.
50+
51+
To add a new text color, add a new key to the `TypeText` type and update the `text` property in the `PaletteColor` type.
52+
53+
### PaletteColor
54+
55+
Defines the color options for the palette.
56+
57+
### SimplePaletteColorOptions
58+
59+
Defines the simple palette color options.
60+
61+
## Palette Configuration
62+
63+
The palette configuration includes the following sections:
64+
65+
### lightModePalette
66+
67+
Defines the palette options for the light mode.
68+
69+
### darkModePalette
70+
71+
Defines the palette options for the dark mode.
72+
73+
## Color Definitions
74+
75+
The color definitions are imported from the `./colors` module and include various shades and hues used throughout the palette.

‎src/theme/colors/colors.ts

+37-12
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,35 @@ export const common = {
4848
white: WHITE
4949
};
5050

51-
export const keppel = {};
52-
53-
export const carribean = {};
54-
55-
export const saffron = {};
51+
export const keppel = {
52+
70: '#daf3eb',
53+
60: '#93E6D1',
54+
50: '#41CCB3',
55+
40: '#00B39F',
56+
30: '#007763',
57+
20: '#006661',
58+
10: '#00403f'
59+
};
60+
61+
export const carribean = {
62+
70: '#E6FFF6',
63+
60: '#A3FFE0',
64+
50: '#78FAD3',
65+
40: '#00D3A9',
66+
30: '#00AD90',
67+
20: '#006157',
68+
10: '#003B37'
69+
};
70+
71+
export const saffron = {
72+
70: '#FFFEE6',
73+
60: '#fffbbd',
74+
50: '#ffeb6b',
75+
40: '#ebc017',
76+
30: '#c4990a',
77+
20: '#785400',
78+
10: '#523600'
79+
};
5680

5781
/**
5882
* Grayscale Colors
@@ -71,6 +95,7 @@ export const charcoal = {
7195
};
7296

7397
export const accentGrey = {
98+
100: '#F6F8F8',
7499
90: '#E8EFF3',
75100
80: '#C9DBE3',
76101
70: '#ABBDC5',
@@ -86,13 +111,13 @@ export const accentGrey = {
86111
* Function Colors
87112
*/
88113
export const blue = {
89-
70: '#EBF6FF',
90-
60: '#99CCFF',
91-
50: '#4797FF',
92-
40: '#1E77FC',
93-
30: '#0F58D6',
94-
20: '#043DB0',
95-
10: '#001B63'
114+
70: '#F0FBFF',
115+
60: '#9EDDFF',
116+
50: '#75CAFF',
117+
40: '#2196F3',
118+
30: '#1272CC',
119+
20: '#0754A6',
120+
10: '#003980'
96121
};
97122

98123
export const green = {

0 commit comments

Comments
 (0)