Merge pull request #546 from sudhanshutech/theme/refactor

[Theme] Refactor theme in components and list all tokens

src/base/Collapse/Collapse.tsx

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

src/base/Collapse/index.tsx

@@ -0,0 +1,5 @@
+import { CollapseProps } from '@mui/material';
+import { Collapse } from './Collapse';
+
+export { Collapse };
+export type { CollapseProps };

src/base/CssBaseLine/CssBaseLine.tsx

@@ -0,0 +1,8 @@
+import {
+  CssBaseline as MuiCssBaseline,
+  CssBaselineProps as MuiCssBaselineProps
+} from '@mui/material';
+
+export function CssBaseline(props: MuiCssBaselineProps): JSX.Element {
+  return <MuiCssBaseline {...props} />;
+}

src/base/CssBaseLine/index.tsx

@@ -0,0 +1,5 @@
+import { CssBaselineProps } from '@mui/material';
+import { CssBaseline } from './CssBaseLine';
+
+export { CssBaseline };
+export type { CssBaselineProps };

src/base/ListItemText/ListItemText.tsx

@@ -0,0 +1,8 @@
+import {
+  ListItemText as MuiListItemText,
+  ListItemTextProps as MuiListItemTextProps
+} from '@mui/material';
+
+export function ListItemText(props: MuiListItemTextProps): JSX.Element {
+  return <MuiListItemText {...props} />;
+}

src/base/ListItemText/index.tsx

@@ -0,0 +1,5 @@
+import { ListItemTextProps } from '@mui/material';
+import { ListItemText } from './ListItemText';
+
+export { ListItemText };
+export type { ListItemTextProps };

src/base/OutlinedInput/OutlinedInput.tsx

@@ -0,0 +1,8 @@
+import {
+  OutlinedInput as MuiOutlinedInput,
+  OutlinedInputProps as MuiOutlinedInputProps
+} from '@mui/material';
+
+export function OutlinedInput(props: MuiOutlinedInputProps): JSX.Element {
+  return <MuiOutlinedInput {...props} />;
+}

src/base/OutlinedInput/index.tsx

@@ -0,0 +1,5 @@
+import { OutlinedInputProps } from '@mui/material';
+import { OutlinedInput } from './OutlinedInput';
+
+export { OutlinedInput };
+export type { OutlinedInputProps };

src/base/index.tsx

@@ -19,7 +19,9 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './CircularProgress';
 export * from './ClickAwayListener';
+export * from './Collapse';
 export * from './Container';
+export * from './CssBaseLine';
 export * from './Dialog';
 export * from './DialogActions';
 export * from './DialogContent';
@@ -41,10 +43,12 @@ export * from './ListItemAvatar';
 export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
+export * from './ListItemText';
 export * from './ListSubheader';
 export * from './Menu';
 export * from './MenuItem';
 export * from './MenuList';
+export * from './OutlinedInput';
 export * from './Pagination';
 export * from './Paper';
 export * from './Popper';

src/custom/ErrorBoundary/ErrorBoundary.tsx

@@ -1,26 +1,32 @@
-import { styled } from '@mui/system';
+import { styled } from '@mui/material';
 import React from 'react';
 import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 import { Box } from '../../base/Box';
 import { Link } from '../../base/Link';
 import { Typography } from '../../base/Typography';
-import { BLACK, KEPPEL } from '../../theme/colors';
-import { DARK_JUNGLE_GREEN } from '../../theme/colors/colors';
 
-const ErrorMessage = styled(Typography)(() => ({
-  color: BLACK,
+const ErrorMessage = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.default,
   fontWeight: 'normal',
   marginTop: '2px',
   marginBottom: '2px',
   fontSize: '1.15rem'
 }));
 
-const StyledLink = styled(Link)(() => ({
-  color: KEPPEL,
+const StyledLink = styled(Link)(({ theme }) => ({
+  color: theme.palette.border.brand,
   textDecoration: 'underline',
   cursor: 'pointer'
 }));
 
+const CodeMessage = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.code,
+  color: theme.palette.text.tertiary,
+  padding: '.85rem',
+  borderRadius: '.2rem',
+  marginBlock: '.5rem'
+}));
+
 interface FallbackComponentProps extends FallbackProps {
   resetErrorBoundary: () => void;
   children?: React.ReactNode;
@@ -30,17 +36,9 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme
   return (
     <div role="alert">
       <h2>Uh-oh!😔 Please pardon the mesh.</h2>
-      <div
-        style={{
-          backgroundColor: DARK_JUNGLE_GREEN,
-          color: '#FFFFFF',
-          padding: '.85rem',
-          borderRadius: '.2rem',
-          marginBlock: '.5rem'
-        }}
-      >
+      <CodeMessage>
         <code>{(error as Error).message}</code>
-      </div>
+      </CodeMessage>
       <ErrorMessage>
         We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
         work, please check out our support channels{' '}

src/custom/ModalCard/style.tsx

@@ -4,15 +4,12 @@ import {
   BLACK,
   BUTTON_MODAL,
   BUTTON_MODAL_DARK,
-  CULTURED,
-  NOT_FOUND,
   SLIGHT_BLACK_2,
-  SLIGHT_BLUE,
-  WHITE
+  SLIGHT_BLUE
 } from '../../theme/colors/colors';
 
 export const ContentContainer = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.mode === 'light' ? WHITE : NOT_FOUND
+  backgroundColor: theme.palette.background.default
 }));
 
 export const ModalWrapper = styled('div')(() => ({
@@ -42,13 +39,15 @@ export const HeaderModal = styled('div')(({ theme }) => {
   const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
   const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
 
+  const iconColor = theme.palette.icon?.inverse;
+
   return {
     display: 'flex',
     borderRadius: '5px  5px 0px 0px',
     justifyContent: 'space-between',
     padding: '11px 16px',
     height: '52px',
-    fill: CULTURED,
+    fill: iconColor,
     boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
     background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
     filter:

src/custom/TooltipIcon.tsx

@@ -5,7 +5,7 @@ import Tooltip from '../patches/Tooltip';
 
 interface TooltipIconProps {
   title: string;
-  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   icon: React.ReactNode;
   arrow?: boolean;
   style?: React.CSSProperties;

src/custom/TransferModal/TransferList/style.tsx

@@ -1,26 +1,24 @@
 import { styled } from '@mui/material';
 import { Button, Chip, Grid, Paper, Typography } from '../../../base';
-import { ALICE_BLUE, BLACK, DARK_TEAL, KEPPEL, WHITE, accentGrey } from '../../../theme';
-import { STEEL_GRAY } from '../../../theme/colors/colors';
 
-export const StyledChip = styled(Chip)({
+export const StyledChip = styled(Chip)(({ theme }) => ({
   padding: '5px 6px !important',
-  color: BLACK,
+  color: theme.palette.text.default,
   fontSize: '0.875rem',
   textTransform: 'uppercase',
   fontWeight: 400,
   height: 'unset',
   borderRadius: '100px',
-  border: `0.5px solid ${accentGrey[40]}`,
-  background: WHITE,
+  border: `0.5px solid ${theme.palette.border?.normal}`,
+  background: theme.palette.background.default,
   maxWidth: '14.375rem'
-});
+}));
 
-export const StyledPaper = styled(Paper)({
+export const StyledPaper = styled(Paper)(({ theme }) => ({
   width: 300,
   height: 280,
   overflow: 'auto',
-  backgroundColor: ALICE_BLUE,
+  backgroundColor: theme.palette.background.blur?.heavy,
   borderRadius: '10px',
   boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.25) inset',
   '@media (max-width: 843px)': {
@@ -32,26 +30,26 @@ export const StyledPaper = styled(Paper)({
   '@media (max-width: 375px)': {
     width: '100%'
   }
-});
+}));
 
-export const ListHeading = styled(Typography)({
+export const ListHeading = styled(Typography)(({ theme }) => ({
   paddingBottom: '15px',
-  color: STEEL_GRAY,
+  color: theme.palette.text?.default,
   textAlign: 'center',
   fontSize: '1rem',
   letterSpacing: '0.15px'
-});
+}));
 
-export const TransferButton = styled(Button)({
+export const TransferButton = styled(Button)(({ theme }) => ({
   margin: '5px 0',
   padding: '7px 0',
   borderRadius: '10px',
-  borderColor: DARK_TEAL,
+  borderColor: theme.palette.border?.strong,
   boxShadow: 'none',
   '&:hover': {
-    borderColor: KEPPEL
+    borderColor: theme.palette.border?.brand
   }
-});
+}));
 
 export const ListGrid = styled(Grid)({
   padding: '0 1rem',

src/theme/README.md

@@ -0,0 +1,75 @@
+# Sistent Theme Palette
+
+This document provides an overview of the custom palette used for theme components.
+
+## Palette Options
+
+### Interactiveness
+
+Defines the interaction color options used in the palette.
+
+- `default`: Default interaction color.
+- `hover`: Color on hover.
+- `disabled`: Color when disabled (optional).
+- `pressed`: Color when pressed.
+- `secondary`: Secondary interaction color.
+- `tertiary`: Tertiary interaction color.
+
+### TypeBackground
+
+Defines the extended background color options used in the palette.
+
+- `secondary`: Secondary background color.
+- `graphics`: Graphics background color.
+- `tertiary`: Tertiary background color.
+- `hover`: Hover background color.
+- `blur`: Blur effect colors (heavy and light).
+- `brand`: Brand interaction colors.
+- `cta`: Call to action interaction colors.
+- `info`: Information interaction colors.
+- `success`: Success interaction colors.
+- `warning`: Warning interaction colors.
+- `error`: Error interaction colors.
+- `code`: Code background color.
+
+To add a new background color, add a new key to the `TypeBackground` type and update the `background` property in the `PaletteColor` type.
+
+### TypeText
+
+Defines the extended text color options used in the palette.
+
+- `default`: Default text color.
+- `secondary`: Secondary text color.
+- `tertiary`: Tertiary text color.
+- `inverse`: Inverse text color.
+- `brand`: Brand text color.
+- `info`: Information text color.
+- `success`: Success text color.
+- `warning`: Warning text color.
+- `error`: Error text color.
+
+To add a new text color, add a new key to the `TypeText` type and update the `text` property in the `PaletteColor` type.
+
+### PaletteColor
+
+Defines the color options for the palette.
+
+### SimplePaletteColorOptions
+
+Defines the simple palette color options.
+
+## Palette Configuration
+
+The palette configuration includes the following sections:
+
+### lightModePalette
+
+Defines the palette options for the light mode.
+
+### darkModePalette
+
+Defines the palette options for the dark mode.
+
+## Color Definitions
+
+The color definitions are imported from the `./colors` module and include various shades and hues used throughout the palette.

src/theme/colors/colors.ts

@@ -48,11 +48,35 @@ export const common = {
   white: WHITE
 };
 
-export const keppel = {};
-
-export const carribean = {};
-
-export const saffron = {};
+export const keppel = {
+  70: '#daf3eb',
+  60: '#93E6D1',
+  50: '#41CCB3',
+  40: '#00B39F',
+  30: '#007763',
+  20: '#006661',
+  10: '#00403f'
+};
+
+export const carribean = {
+  70: '#E6FFF6',
+  60: '#A3FFE0',
+  50: '#78FAD3',
+  40: '#00D3A9',
+  30: '#00AD90',
+  20: '#006157',
+  10: '#003B37'
+};
+
+export const saffron = {
+  70: '#FFFEE6',
+  60: '#fffbbd',
+  50: '#ffeb6b',
+  40: '#ebc017',
+  30: '#c4990a',
+  20: '#785400',
+  10: '#523600'
+};
 
 /**
  * Grayscale Colors
@@ -71,6 +95,7 @@ export const charcoal = {
 };
 
 export const accentGrey = {
+  100: '#F6F8F8',
   90: '#E8EFF3',
   80: '#C9DBE3',
   70: '#ABBDC5',
@@ -86,13 +111,13 @@ export const accentGrey = {
  * Function Colors
  */
 export const blue = {
-  70: '#EBF6FF',
-  60: '#99CCFF',
-  50: '#4797FF',
-  40: '#1E77FC',
-  30: '#0F58D6',
-  20: '#043DB0',
-  10: '#001B63'
+  70: '#F0FBFF',
+  60: '#9EDDFF',
+  50: '#75CAFF',
+  40: '#2196F3',
+  30: '#1272CC',
+  20: '#0754A6',
+  10: '#003980'
 };
 
 export const green = {