From 6c46bea200907a6604909a75a51f9acfa1dbce33 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sat, 9 Mar 2024 00:31:14 +0530 Subject: [PATCH 01/23] fix(theme): lightmode pallete Signed-off-by: Sudhanshu Dasgupta --- src/theme/colors/colors.ts | 21 ++- src/theme/colors/index.ts | 2 + src/theme/palette.ts | 255 ++++++++++++++++++++----------------- 3 files changed, 162 insertions(+), 116 deletions(-) diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index 75af1f93..13b3507f 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -48,11 +48,28 @@ export const common = { white: WHITE }; -export const keppel = {}; +export const keppel = { + 80: '#daf3eb', + 70: '#00B39F', + 60: '#93E6D1', + 50: '#41CCB3', + 40: '#00B39F', + 30: '#008c81', + 20: '#006661', + 10: '#00403f' +}; export const carribean = {}; -export const saffron = {}; +export const saffron = { + 70: '#F8E2A6', + 60: '#EBC017', + 50: '#D3A300', + 40: '#B38600', + 30: '#c4990a', + 20: '#664F00', + 10: '#403400' +}; /** * Grayscale Colors diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts index e06ff535..771391b5 100644 --- a/src/theme/colors/index.ts +++ b/src/theme/colors/index.ts @@ -52,11 +52,13 @@ export { eerieBlack, green, jungleGreen, + keppel, notificationColors, patternsBlue, primaryColor, red, redDelete, + saffron, tabMenu, tableBackgroundHover, white, diff --git a/src/theme/palette.ts b/src/theme/palette.ts index de8d0db6..90cd7dfc 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -1,133 +1,160 @@ -import { PaletteOptions, lighten } from '@mui/material'; -import { - CHARCOAL, - KEPPEL, - accentGrey, - actionIcon, - buttonDelete, - common, - cultured, - notificationColors -} from './colors'; +import { PaletteOptions } from '@mui/material'; +import * as Colors from './colors'; declare module '@mui/material/styles' { - interface PaletteColor { - darker?: string; - } - interface SimplePaletteColorOptions { - darker?: string; + interface Interactiveness { + default: string; + hover: string; + disabled: string; + pressed: string; + secondary: string; + tertiary: string; } - interface Palette { - neutral?: Palette['primary']; - cultured: { - main: string; - }; - actionIcon: { - main: string; + + interface PaletteColor { + background: { + default: string; + primary: string; + secondary: string; + tertiary: string; hover: string; + blur: { + heavy: string; + light: string; + }; + brand: Interactiveness; + cta: Interactiveness; + info: Interactiveness; + success: Interactiveness; + warning: Interactiveness; + error: Interactiveness; + code: string; }; - buttonDelete: { - main: string; - hover: string; + text: { + default: string; + secondary: string; + tertiary: string; + inverse: string; + brand: string; + info: string; + success: string; + error: string; + }; + border: { + default: string; + strong: string; + brand: string; + normal: string; + }; + icon: { + default: string; + brand: string; + inverse: string; + weather: string; + disabled: string; }; } - interface PaletteOptions { - neutral?: PaletteOptions['primary']; - cultured?: { - main?: string; + interface SimplePaletteColorOptions { + background: { + default: string; + primary: string; + secondary: string; + tertiary: string; + hover: string; + blur: { + heavy: string; + light: string; + }; + brand: Interactiveness; + cta: Interactiveness; + info: Interactiveness; + success: Interactiveness; + warning: Interactiveness; + error: Interactiveness; + code: string; }; - actionIcon?: { - main?: string; - hover?: string; + text: { + default: string; + secondary: string; + tertiary: string; + inverse: string; + brand: string; + info: string; + success: string; + error: string; }; - buttonDelete?: { - main?: string; - hover?: string; + border: { + default: string; + strong: string; + brand: string; + normal: string; + }; + icon: { + default: string; + brand: string; + inverse: string; + weather: string; + disabled: string; }; } } export const lightModePalette: PaletteOptions = { - primary: { - main: CHARCOAL, - light: lighten(CHARCOAL, 0.7), - contrastText: common.white - }, - secondary: { - main: KEPPEL - }, background: { - default: accentGrey[90], - paper: accentGrey[90] - }, - info: { - main: notificationColors.info.main - }, - error: { - main: notificationColors.error.main, - dark: notificationColors.error.dark - }, - warning: { - main: notificationColors.warning.main, - light: notificationColors.warning.light, - contrastText: common.white - }, - success: { - main: notificationColors.success.main - }, - common: { - black: common.black, - white: common.white - }, - cultured: { - main: cultured.main - }, - actionIcon: { - main: actionIcon.main, - hover: actionIcon.hover - }, - buttonDelete: { - main: buttonDelete.main, - hover: buttonDelete.hover - }, - neutral: {}, - text: {} + default: Colors.charcoal[100], + secondary: Colors.accentGrey[90], + tertiary: Colors.accentGrey[80], + hover: Colors.charcoal[90], + blur: { + heavy: `rgba(${Colors.charcoal[90]}, 0.8)`, + light: `rgba(${Colors.charcoal[90]}, 0.2)` + }, + brand: { + default: Colors.keppel[30], + hover: Colors.keppel[40], + disabled: Colors.charcoal[90], + pressed: Colors.keppel[10], + secondary: Colors.keppel[50], + tertiary: Colors.keppel[70] + }, + cta: { + default: Colors.saffron[30], + hover: Colors.keppel[40], + pressed: Colors.keppel[50], + secondary: Colors.keppel[60], + tertiary: Colors.keppel[70] + }, + info: { + default: Colors.blue[30], + hover: Colors.blue[20], + pressed: Colors.blue[10], + secondary: Colors.blue[60], + tertiary: Colors.blue[70] + }, + success: { + default: Colors.green[30], + hover: Colors.green[20], + pressed: Colors.green[10], + secondary: Colors.green[60], + tertiary: Colors.green[70] + }, + warning: { + default: Colors.yellow[30], + hover: Colors.yellow[20], + pressed: Colors.yellow[10], + secondary: Colors.yellow[60], + tertiary: Colors.yellow[70] + }, + error: { + default: Colors.red[30], + hover: Colors.red[20], + pressed: Colors.red[10], + secondary: Colors.red[60], + tertiary: Colors.red[70] + } + } }; export const darkModePalette: PaletteOptions = { - primary: { - main: KEPPEL, - light: lighten(KEPPEL, 0.7), - contrastText: common.white - }, - secondary: { - main: KEPPEL - }, - background: { - default: accentGrey[10], - paper: accentGrey[10] - }, - info: { - main: notificationColors.info.main, - contrastText: common.white - }, - error: { - main: notificationColors.error.main, - dark: notificationColors.error.dark, - contrastText: common.white - }, - warning: { - main: notificationColors.warning.main, - light: notificationColors.warning.light, - contrastText: common.white - }, - success: { - main: notificationColors.success.main, - contrastText: common.white - }, - common: { - black: common.black, - white: common.white - }, - neutral: {} + // dark variants of the tokens }; From e5b939ed3b88593525b0e26e590c9720c5827f6a Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sat, 9 Mar 2024 00:41:03 +0530 Subject: [PATCH 02/23] fix(theme): dark pallete Signed-off-by: Sudhanshu Dasgupta --- src/theme/colors/colors.ts | 10 +++---- src/theme/palette.ts | 54 +++++++++++++++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 6 deletions(-) diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index 13b3507f..1541b773 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -63,12 +63,12 @@ export const carribean = {}; export const saffron = { 70: '#F8E2A6', - 60: '#EBC017', - 50: '#D3A300', - 40: '#B38600', + 60: '#fffbbd', + 50: '#ffeb6b', + 40: '#ebc017', 30: '#c4990a', - 20: '#664F00', - 10: '#403400' + 20: '#785400', + 10: '#523600' }; /** diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 90cd7dfc..fb586ce8 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -156,5 +156,57 @@ export const lightModePalette: PaletteOptions = { }; export const darkModePalette: PaletteOptions = { - // dark variants of the tokens + background: { + default: Colors.charcoal[10], + secondary: Colors.accentGrey[10], + tertiary: Colors.accentGrey[30], + hover: Colors.charcoal[20], + blur: { + heavy: `rgba(${Colors.accentGrey[10]}, 0.8)`, + light: `rgba(${Colors.accentGrey[10]}, 0.5)` + }, + brand: { + default: Colors.keppel[40], + hover: Colors.keppel[50], + disabled: Colors.charcoal[20], + pressed: Colors.keppel[60], + secondary: Colors.keppel[20], + tertiary: Colors.keppel[10] + }, + cta: { + default: Colors.saffron[40], + hover: Colors.saffron[50], + pressed: Colors.saffron[60], + secondary: Colors.saffron[20], + tertiary: Colors.saffron[10] + }, + info: { + default: Colors.blue[40], + hover: Colors.blue[50], + pressed: Colors.blue[60], + secondary: Colors.blue[20], + tertiary: Colors.blue[10] + }, + success: { + default: Colors.green[40], + hover: Colors.green[50], + pressed: Colors.green[60], + secondary: Colors.green[20], + tertiary: Colors.green[10] + }, + warning: { + default: Colors.yellow[40], + hover: Colors.yellow[50], + pressed: Colors.yellow[60], + secondary: Colors.yellow[20], + tertiary: Colors.yellow[10] + }, + error: { + default: Colors.red[40], + hover: Colors.red[50], + pressed: Colors.red[60], + secondary: Colors.red[20], + tertiary: Colors.red[10] + } + } }; From 69312ee7d8cedce07f970624149778a61a8ff116 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sat, 9 Mar 2024 00:50:30 +0530 Subject: [PATCH 03/23] fix(theme): list all tokens Signed-off-by: Sudhanshu Dasgupta --- src/theme/palette.ts | 51 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/src/theme/palette.ts b/src/theme/palette.ts index fb586ce8..864bc8c8 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -38,6 +38,7 @@ declare module '@mui/material/styles' { brand: string; info: string; success: string; + warning: string; error: string; }; border: { @@ -81,6 +82,7 @@ declare module '@mui/material/styles' { brand: string; info: string; success: string; + warning: string; error: string; }; border: { @@ -152,6 +154,30 @@ export const lightModePalette: PaletteOptions = { secondary: Colors.red[60], tertiary: Colors.red[70] } + }, + text: { + default: Colors.charcoal[10], + secondary: Colors.charcoal[90], + tertiary: Colors.charcoal[50], + inverse: Colors.charcoal[100], + brand: Colors.accentGrey[40], + info: Colors.blue[30], + success: Colors.green[30], + warning: Colors.yellow[30], + error: Colors.red[30] + }, + border: { + default: Colors.charcoal[90], + strong: Colors.charcoal[30], + brand: Colors.keppel[30], + normal: Colors.charcoal[60] + }, + icon: { + default: Colors.accentGrey[10], + brand: Colors.keppel[30], + inverse: Colors.charcoal[100], + weather: Colors.accentGrey[50], + disabled: Colors.charcoal[70] } }; @@ -208,5 +234,30 @@ export const darkModePalette: PaletteOptions = { secondary: Colors.red[20], tertiary: Colors.red[10] } + }, + text: { + default: Colors.charcoal[100], + secondary: Colors.charcoal[40], + tertiary: Colors.charcoal[60], + inverse: Colors.charcoal[10], + brand: Colors.keppel[40], + info: Colors.blue[40], + success: Colors.green[40], + warning: Colors.yellow[40], + error: Colors.red[40] + }, + border: { + default: Colors.accentGrey[10], + strong: Colors.accentGrey[60], + brand: Colors.keppel[40], + normal: Colors.accentGrey[30] + }, + + icon: { + default: Colors.accentGrey[90], + brand: Colors.keppel[40], + inverse: Colors.charcoal[10], + weather: Colors.saffron[40], + disabled: Colors.charcoal[50] } }; From e6c14fd21cbbf11e075a16a6f6348a1b928dcaac Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 11 Mar 2024 00:10:15 +0530 Subject: [PATCH 04/23] fix(theme): extend palette options Signed-off-by: Sudhanshu Dasgupta --- src/theme/index.tsx | 2 + src/theme/palette.ts | 119 ++++++++++++++++++++++--------------------- 2 files changed, 63 insertions(+), 58 deletions(-) diff --git a/src/theme/index.tsx b/src/theme/index.tsx index b79bd9f0..755129e8 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -1,2 +1,4 @@ +export { darkModePalette, lightModePalette } from './palette'; + export { default as SistentThemeProvider } from './ThemeProvider'; export * from './colors'; diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 864bc8c8..d1001ee3 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -5,42 +5,74 @@ declare module '@mui/material/styles' { interface Interactiveness { default: string; hover: string; - disabled: string; + disabled?: string; pressed: string; secondary: string; tertiary: string; } + interface TypeBackground { + secondary?: string; + tertiary?: string; + hover?: string; + blur?: { + heavy: string; + light: string; + }; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + } + + interface TypeText { + default?: string; + secondary: string; + tertiary?: string; + inverse?: string; + brand?: string; + info?: string; + success?: string; + warning?: string; + error?: string; + } interface PaletteColor { - background: { - default: string; - primary: string; - secondary: string; - tertiary: string; - hover: string; - blur: { - heavy: string; - light: string; - }; - brand: Interactiveness; - cta: Interactiveness; - info: Interactiveness; - success: Interactiveness; - warning: Interactiveness; - error: Interactiveness; - code: string; + secondary?: string; + blur?: { + heavy: string; + light: string; }; - text: { - default: string; - secondary: string; - tertiary: string; - inverse: string; - brand: string; - info: string; - success: string; - warning: string; - error: string; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; + strong?: string; + normal?: string; + } + + interface SimplePaletteColorOptions { + secondary?: string; + blur?: { + heavy: string; + light: string; }; + brand?: Interactiveness; + cta?: Interactiveness; + info?: Interactiveness; + success?: Interactiveness; + warning?: Interactiveness; + error?: Interactiveness; + code?: string; + strong?: string; + normal?: string; + } + + interface Palette { border: { default: string; strong: string; @@ -55,36 +87,7 @@ declare module '@mui/material/styles' { disabled: string; }; } - interface SimplePaletteColorOptions { - background: { - default: string; - primary: string; - secondary: string; - tertiary: string; - hover: string; - blur: { - heavy: string; - light: string; - }; - brand: Interactiveness; - cta: Interactiveness; - info: Interactiveness; - success: Interactiveness; - warning: Interactiveness; - error: Interactiveness; - code: string; - }; - text: { - default: string; - secondary: string; - tertiary: string; - inverse: string; - brand: string; - info: string; - success: string; - warning: string; - error: string; - }; + interface PaletteOptions { border: { default: string; strong: string; From 2029cd3fa6b62a574a4e5969a2fd1e6e8bce346c Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 11 Mar 2024 00:23:48 +0530 Subject: [PATCH 05/23] docs(changes): document changes Signed-off-by: Sudhanshu Dasgupta --- src/theme/palette.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/theme/palette.ts b/src/theme/palette.ts index d1001ee3..2efdecfb 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -2,6 +2,7 @@ import { PaletteOptions } from '@mui/material'; import * as Colors from './colors'; declare module '@mui/material/styles' { + // Defines the interaction color options used in the palette. interface Interactiveness { default: string; hover: string; @@ -10,6 +11,7 @@ declare module '@mui/material/styles' { secondary: string; tertiary: string; } + // Defines the extended background color options used in the palette. interface TypeBackground { secondary?: string; tertiary?: string; @@ -26,6 +28,7 @@ declare module '@mui/material/styles' { error?: Interactiveness; } + // Defines the extended text color options used in the palette. interface TypeText { default?: string; secondary: string; @@ -38,6 +41,7 @@ declare module '@mui/material/styles' { error?: string; } + // Defines the color options for the palette interface PaletteColor { secondary?: string; blur?: { @@ -55,6 +59,7 @@ declare module '@mui/material/styles' { normal?: string; } + // Defines the simple palette color options. interface SimplePaletteColorOptions { secondary?: string; blur?: { @@ -72,6 +77,9 @@ declare module '@mui/material/styles' { normal?: string; } + /* Defines the palette containing border and icon color options. + To define any additional custom color options, you can extend the interface here. + */ interface Palette { border: { default: string; @@ -87,6 +95,8 @@ declare module '@mui/material/styles' { disabled: string; }; } + + // Defines the options available for the palette. interface PaletteOptions { border: { default: string; From c33fa26973ae9cb4cff681a53980e56832c2eb73 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 11 Mar 2024 19:11:49 +0530 Subject: [PATCH 06/23] fix(update): colors Signed-off-by: Sudhanshu Dasgupta --- src/theme/colors/colors.ts | 10 +++++++++- src/theme/palette.ts | 10 +++++----- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index 1541b773..fef11e56 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -59,7 +59,15 @@ export const keppel = { 10: '#00403f' }; -export const carribean = {}; +export const carribean = { + 70: '#E6FFF6', + 60: '#A3FFE0', + 50: '#78FAD3', + 40: '#00D3A9', + 30: '#00AD90', + 20: '#006157', + 10: '#003B37' +}; export const saffron = { 70: '#F8E2A6', diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 2efdecfb..053dbba0 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -1,4 +1,4 @@ -import { PaletteOptions } from '@mui/material'; +import { PaletteOptions, alpha } from '@mui/material'; import * as Colors from './colors'; declare module '@mui/material/styles' { @@ -121,8 +121,8 @@ export const lightModePalette: PaletteOptions = { tertiary: Colors.accentGrey[80], hover: Colors.charcoal[90], blur: { - heavy: `rgba(${Colors.charcoal[90]}, 0.8)`, - light: `rgba(${Colors.charcoal[90]}, 0.2)` + heavy: alpha(Colors.charcoal[90], 0.8), + light: alpha(Colors.charcoal[90], 0.5) }, brand: { default: Colors.keppel[30], @@ -201,8 +201,8 @@ export const darkModePalette: PaletteOptions = { tertiary: Colors.accentGrey[30], hover: Colors.charcoal[20], blur: { - heavy: `rgba(${Colors.accentGrey[10]}, 0.8)`, - light: `rgba(${Colors.accentGrey[10]}, 0.5)` + heavy: alpha(Colors.charcoal[10], 0.8), + light: alpha(Colors.charcoal[10], 0.5) }, brand: { default: Colors.keppel[40], From b5eab5574fd5ef78d80b1c0a5cc0c07b7ccce156 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 12 Mar 2024 18:57:55 +0530 Subject: [PATCH 07/23] fix(refactor): some comp Signed-off-by: Sudhanshu Dasgupta --- src/theme/components/button.modifier.ts | 25 ++++++++++++++--------- src/theme/components/collapse.modifier.ts | 9 ++++---- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts index b63e5046..3fff59c2 100644 --- a/src/theme/components/button.modifier.ts +++ b/src/theme/components/button.modifier.ts @@ -1,32 +1,37 @@ import { Components, Theme } from '@mui/material'; -import { CARIBBEAN_GREEN, WHITE, buttonDisabled } from '../colors'; export const MuiButton: Components['MuiButton'] = { styleOverrides: { root: ({ theme }) => { const { palette: { - secondary: { main } + background: { brand }, + text: { tertiary, default: defaultText } } } = theme; return { '&.MuiButton-contained': { - color: WHITE, - backgroundColor: main, + color: defaultText, + backgroundColor: brand?.default, '&:hover': { - backgroundColor: CARIBBEAN_GREEN + backgroundColor: brand?.hover } }, '&.MuiButton-outlined': { - border: `1px solid ${main}`, + border: `1px solid ${brand?.default}`, '&:hover': { - backgroundColor: CARIBBEAN_GREEN, - color: WHITE + backgroundColor: brand?.hover, + color: defaultText } }, '&.MuiButton-contained.Mui-disabled': { - color: buttonDisabled.main, - backgroundColor: buttonDisabled.main + color: tertiary, + backgroundColor: brand?.disabled + }, + '&.MuiButton-outlined.Mui-disabled': { + border: `1px solid ${tertiary}`, + backgroundColor: brand?.disabled, + color: tertiary } }; } diff --git a/src/theme/components/collapse.modifier.ts b/src/theme/components/collapse.modifier.ts index 5c37e179..a7d58f88 100644 --- a/src/theme/components/collapse.modifier.ts +++ b/src/theme/components/collapse.modifier.ts @@ -1,5 +1,4 @@ import { Components, Theme } from '@mui/material'; -import { patternsBlue } from '../colors'; declare module '@mui/material/Collapse' { interface CollapseProps { @@ -19,12 +18,14 @@ export const MuiCollapse: Components['MuiCollapse'] = { props: { variant: 'submenu' }, style: ({ theme }) => { const { - palette: { cultured } + palette: { + background: { hover, secondary } + } } = theme; return { - backgroundColor: cultured.main, + backgroundColor: hover, '&:active': { - backgroundColor: patternsBlue.main + backgroundColor: secondary } }; } From 8b9bcb67f0cf8d607f41d2977b5015af5dc761d2 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 18 Mar 2024 20:30:10 +0530 Subject: [PATCH 08/23] fix(theme): leftover Signed-off-by: Sudhanshu Dasgupta --- src/theme/colors/index.ts | 1 + src/theme/components/checkbox.modifier.ts | 44 ++++--- src/theme/components/formlabel.modifier.ts | 16 ++- src/theme/components/input.modifier.ts | 28 +++-- src/theme/components/link.modifier.ts | 41 ++++--- src/theme/components/listitem.modifier.ts | 109 ++++++++++-------- src/theme/components/menuitem.modifier.ts | 38 +++--- .../components/outlinedinput.modifier.ts | 34 +++--- src/theme/components/switch.modifier.ts | 37 +++--- src/theme/components/textfield.modifier.ts | 22 ++-- src/theme/palette.ts | 9 ++ 11 files changed, 229 insertions(+), 150 deletions(-) diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts index 771391b5..6a921643 100644 --- a/src/theme/colors/index.ts +++ b/src/theme/colors/index.ts @@ -42,6 +42,7 @@ export { blue, buttonDelete, buttonDisabled, + carribean, casper, charcoal, common, diff --git a/src/theme/components/checkbox.modifier.ts b/src/theme/components/checkbox.modifier.ts index 9f762350..34aef50b 100644 --- a/src/theme/components/checkbox.modifier.ts +++ b/src/theme/components/checkbox.modifier.ts @@ -1,30 +1,38 @@ import { Components, Theme } from '@mui/material'; -import { CHARCOAL, connected, darkSlateGray } from '../colors'; export const MuiCheckbox: Components['MuiCheckbox'] = { styleOverrides: { - root: { - color: 'transparent', - '&.Mui-checked': { - color: darkSlateGray.main, + root: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + background: { brand }, + border: { strong } + } + } = theme; + return { + color: 'transparent', + '&.Mui-checked': { + color: defaultText, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + borderColor: brand?.default, + marginLeft: '0px', + padding: '0px' + } + }, '& .MuiSvgIcon-root': { width: '1.25rem', height: '1.25rem', - borderColor: connected.main, - marginLeft: '0px', + border: `.75px solid ${strong}`, + borderRadius: '2px', padding: '0px' + }, + '&:hover': { + backgroundColor: 'transparent' } - }, - '& .MuiSvgIcon-root': { - width: '1.25rem', - height: '1.25rem', - border: `.75px solid ${CHARCOAL}`, - borderRadius: '2px', - padding: '0px' - }, - '&:hover': { - backgroundColor: 'transparent' - } + }; } } }; diff --git a/src/theme/components/formlabel.modifier.ts b/src/theme/components/formlabel.modifier.ts index 2e3a2201..67b1626c 100644 --- a/src/theme/components/formlabel.modifier.ts +++ b/src/theme/components/formlabel.modifier.ts @@ -1,12 +1,18 @@ import { Components, Theme } from '@mui/material'; -import { connected } from '../colors'; export const MuiFormLabel: Components['MuiFormLabel'] = { styleOverrides: { - root: { - '&.Mui-focused': { - color: connected.main - } + root: ({ theme }) => { + const { + palette: { + background: { brand } + } + } = theme; + return { + '&.Mui-focused': { + color: brand?.default + } + }; } } }; diff --git a/src/theme/components/input.modifier.ts b/src/theme/components/input.modifier.ts index 3ffe787f..d42899ea 100644 --- a/src/theme/components/input.modifier.ts +++ b/src/theme/components/input.modifier.ts @@ -1,18 +1,24 @@ import { Components, Theme } from '@mui/material/styles'; -import { CARIBBEAN_GREEN } from '../colors'; export const MuiInput: Components['MuiInput'] = { styleOverrides: { - root: { - '&:before': { - borderBottom: '2px solid rgba(0, 0, 0, 0.5)' - }, - '&.Mui-focused:after': { - borderBottom: ` 2px solid ${CARIBBEAN_GREEN}` - }, - '&:hover:not(.Mui-disabled):before': { - borderBottom: `2px solid ${CARIBBEAN_GREEN}` - } + root: ({ theme }) => { + const { + palette: { + background: { graphics } + } + } = theme; + return { + '&:before': { + borderBottom: '2px solid rgba(0, 0, 0, 0.5)' + }, + '&.Mui-focused:after': { + borderBottom: ` 2px solid ${graphics?.default}` + }, + '&:hover:not(.Mui-disabled):before': { + borderBottom: `2px solid ${graphics?.default}` + } + }; } } }; diff --git a/src/theme/components/link.modifier.ts b/src/theme/components/link.modifier.ts index 8175292c..b5248407 100644 --- a/src/theme/components/link.modifier.ts +++ b/src/theme/components/link.modifier.ts @@ -1,26 +1,33 @@ import { Components, Theme } from '@mui/material'; -import { connected, darkTeal } from '../colors'; export const MuiLink: Components['MuiLink'] = { styleOverrides: { - root: { - fontWeight: '600', - textDecoration: 'none', - color: darkTeal.main, - '&:visited': { - textDecoration: 'none' - }, - '&:hover': { - textDecoration: 'underline' - }, - '&.keppel': { - color: connected.main - }, - '&.Mui-disabled': { + root: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + background: { brand } + } + } = theme; + return { + fontWeight: '600', + textDecoration: 'none', + color: defaultText, + '&:visited': { + textDecoration: 'none' + }, '&:hover': { - cursor: 'not-allowed' + textDecoration: 'underline' + }, + '&.keppel': { + color: brand?.default + }, + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } } - } + }; } } }; diff --git a/src/theme/components/listitem.modifier.ts b/src/theme/components/listitem.modifier.ts index 7ce9d7e0..023b9890 100644 --- a/src/theme/components/listitem.modifier.ts +++ b/src/theme/components/listitem.modifier.ts @@ -1,63 +1,80 @@ import { Components, ListItemProps, Theme } from '@mui/material'; -import { DARK_SLATE_GRAY, PATTERNS_BLUE } from '../colors'; export const MuiListItem: Components['MuiListItem'] = { variants: [ { props: { variant: 'menu' } as ListItemProps, - style: { - textTransform: 'none', - margin: '.5rem 0rem .5rem .5rem', - padding: '0rem', - color: DARK_SLATE_GRAY, - fontSize: '.9rem', - fill: DARK_SLATE_GRAY, - '&.Mui-selected': { - fontWeight: 'bold', - color: DARK_SLATE_GRAY, - fill: DARK_SLATE_GRAY, - '&:hover': { - color: DARK_SLATE_GRAY, - '& svg': { - fill: DARK_SLATE_GRAY + style: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + icon: { default: defaultIcon }, + background: { brand } + } + } = theme; + return { + textTransform: 'none', + margin: '.5rem 0rem .5rem .5rem', + padding: '0rem', + color: defaultText, + fontSize: '.9rem', + fill: defaultText, + '&.Mui-selected': { + fontWeight: 'bold', + color: defaultText, + fill: defaultText, + '&:hover': { + color: defaultText, + '& svg': { + fill: defaultIcon + } } + }, + '&:li:has(> .MuiMenuItem)': { + backgroundColor: brand?.default + }, + '& svg': { + marginRight: '.75rem', + paddingLeft: '0rem', + marginLeft: '0rem' } - }, - '&:li:has(> .MuiMenuItem)': { - backgroundColor: 'green' - }, - '& svg': { - marginRight: '.75rem', - paddingLeft: '0rem', - marginLeft: '0rem' - } + }; } }, { props: { variant: 'submenu' } as ListItemProps, - style: { - textTransform: 'none', - margin: '.0rem 0rem 0rem .5rem', - justifyContent: 'center', - alignItems: 'center', - color: DARK_SLATE_GRAY, - fontSize: '.9rem', - fill: DARK_SLATE_GRAY, - '&.Mui-selected': { - fontWeight: 'bold', - backgroundColor: PATTERNS_BLUE, - color: DARK_SLATE_GRAY, - fill: DARK_SLATE_GRAY, - '&:hover': { - color: DARK_SLATE_GRAY, - '& svg': { - fill: DARK_SLATE_GRAY + style: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + icon: { default: defaultIcon }, + background: { secondary } + } + } = theme; + return { + textTransform: 'none', + margin: '.0rem 0rem 0rem .5rem', + justifyContent: 'center', + alignItems: 'center', + color: defaultText, + fontSize: '.9rem', + fill: defaultText, + '&.Mui-selected': { + fontWeight: 'bold', + backgroundColor: secondary, + color: defaultText, + fill: defaultText, + '&:hover': { + color: defaultText, + '& svg': { + fill: defaultIcon + } } + }, + '& svg': { + marginRight: '.5rem' } - }, - '& svg': { - marginRight: '.5rem' - } + }; } } ] diff --git a/src/theme/components/menuitem.modifier.ts b/src/theme/components/menuitem.modifier.ts index 8c514ae3..705f49a8 100644 --- a/src/theme/components/menuitem.modifier.ts +++ b/src/theme/components/menuitem.modifier.ts @@ -1,27 +1,33 @@ import { Components, Theme } from '@mui/material'; -import { darkTeal } from '../colors'; export const MuiMenuItem: Components['MuiMenuItem'] = { styleOverrides: { - root: { - '&:hover': { - '& li': { - color: darkTeal.dark, - fill: darkTeal.dark + root: ({ theme }) => { + const { + palette: { + background: { hover } } - }, - - '& svg': { + } = theme; + return { '&:hover': { - fill: darkTeal.dark - } - }, + '& li': { + color: hover, + fill: hover + } + }, - '&.Mui-disabled': { - '&:hover': { - cursor: 'not-allowed' + '& svg': { + '&:hover': { + fill: hover + } + }, + + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } } - } + }; } } }; diff --git a/src/theme/components/outlinedinput.modifier.ts b/src/theme/components/outlinedinput.modifier.ts index bf4f5cdb..a0f17e86 100644 --- a/src/theme/components/outlinedinput.modifier.ts +++ b/src/theme/components/outlinedinput.modifier.ts @@ -1,25 +1,31 @@ import { Components, Theme } from '@mui/material'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; -import { CARIBBEAN_GREEN, KEPPEL } from '../colors'; export const MuiOutlinedInput: Components['MuiOutlinedInput'] = { styleOverrides: { notchedOutline: { borderColor: 'rgba(0, 0, 0, 0.5)' }, - root: { - [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor: CARIBBEAN_GREEN - }, - [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { - borderColor: CARIBBEAN_GREEN - }, - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: KEPPEL - }, - '&:hover .MuiOutlinedInput-notchedOutline': { - borderColor: KEPPEL - } + root: ({ theme }) => { + const { + palette: { + background: { graphics, brand } + } + } = theme; + return { + [`&:hover .${outlinedInputClasses.notchedOutline}`]: { + borderColor: graphics?.default + }, + [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { + borderColor: graphics?.default + }, + '&.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderColor: brand?.default + }, + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: brand?.default + } + }; } } }; diff --git a/src/theme/components/switch.modifier.ts b/src/theme/components/switch.modifier.ts index 236dedee..a99052e5 100644 --- a/src/theme/components/switch.modifier.ts +++ b/src/theme/components/switch.modifier.ts @@ -1,24 +1,31 @@ import { Components, Theme } from '@mui/material'; -import { CARIBBEAN_GREEN, CHARCOAL } from '../colors'; export const MuiSwitch: Components['MuiSwitch'] = { styleOverrides: { - root: { - '& .MuiSwitch-switchBase': { - color: CHARCOAL, - '&:hover': { - backgroundColor: 'rgba(60, 73, 79, 0.06)' + root: ({ theme }) => { + const { + palette: { + background: { graphics }, + border: { strong } } - }, - '& .MuiSwitch-switchBase.Mui-checked': { - color: CARIBBEAN_GREEN, - '&:hover': { - backgroundColor: 'rgba(0, 211, 169, 0.06)' + } = theme; + return { + '& .MuiSwitch-switchBase': { + color: strong, + '&:hover': { + backgroundColor: 'rgba(60, 73, 79, 0.06)' + } + }, + '& .MuiSwitch-switchBase.Mui-checked': { + color: graphics?.default, + '&:hover': { + backgroundColor: 'rgba(0, 211, 169, 0.06)' + } + }, + '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { + backgroundColor: graphics?.default } - }, - '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { - backgroundColor: CARIBBEAN_GREEN - } + }; } } }; diff --git a/src/theme/components/textfield.modifier.ts b/src/theme/components/textfield.modifier.ts index b4d43e22..c6bd08de 100644 --- a/src/theme/components/textfield.modifier.ts +++ b/src/theme/components/textfield.modifier.ts @@ -1,15 +1,21 @@ import { Components, Theme } from '@mui/material'; -import { CARIBBEAN_GREEN } from '../colors'; export const MuiTextField: Components['MuiTextField'] = { styleOverrides: { - root: { - '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)', - '--TextField-brandBorderHoverColor': CARIBBEAN_GREEN, - '--TextField-brandBorderFocusedColor': CARIBBEAN_GREEN, - '& label.Mui-focused': { - color: 'var(--TextField-brandBorderFocusedColor)' - } + root: ({ theme }) => { + const { + palette: { + background: { graphics } + } + } = theme; + return { + '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)', + '--TextField-brandBorderHoverColor': graphics?.default, + '--TextField-brandBorderFocusedColor': graphics?.default, + '& label.Mui-focused': { + color: 'var(--TextField-brandBorderFocusedColor)' + } + }; } } }; diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 053dbba0..2bdeb389 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -14,6 +14,9 @@ declare module '@mui/material/styles' { // Defines the extended background color options used in the palette. interface TypeBackground { secondary?: string; + graphics?: { + default: string; + }; tertiary?: string; hover?: string; blur?: { @@ -132,6 +135,9 @@ export const lightModePalette: PaletteOptions = { secondary: Colors.keppel[50], tertiary: Colors.keppel[70] }, + graphics: { + default: Colors.carribean[30] + }, cta: { default: Colors.saffron[30], hover: Colors.keppel[40], @@ -212,6 +218,9 @@ export const darkModePalette: PaletteOptions = { secondary: Colors.keppel[20], tertiary: Colors.keppel[10] }, + graphics: { + default: Colors.carribean[40] + }, cta: { default: Colors.saffron[40], hover: Colors.saffron[50], From 074a9d347910f30a80608e9007b1de436aab7d21 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 19 Mar 2024 01:08:08 +0530 Subject: [PATCH 09/23] fix(theme): left modifiers Signed-off-by: Sudhanshu Dasgupta --- src/theme/components/appbar.modifiter.ts | 4 +-- src/theme/components/pagination.modifier.ts | 27 +++++++++++++-------- src/theme/components/tab.modifier.ts.ts | 23 ++++++++++++------ 3 files changed, 34 insertions(+), 20 deletions(-) diff --git a/src/theme/components/appbar.modifiter.ts b/src/theme/components/appbar.modifiter.ts index 343b2dab..53ff1249 100644 --- a/src/theme/components/appbar.modifiter.ts +++ b/src/theme/components/appbar.modifiter.ts @@ -6,14 +6,14 @@ export const MuiAppBar: Components['MuiAppBar'] = { root: ({ theme }) => { const { palette: { - primary: { main } + background: { default: defaultBackground } } } = theme; return { width: `calc(100% - ${drawerWidth}px)`, ml: { sm: `${drawerWidth}px` }, elevation: 2, - background: main + background: defaultBackground }; } } diff --git a/src/theme/components/pagination.modifier.ts b/src/theme/components/pagination.modifier.ts index 63da1dc7..9b7244aa 100644 --- a/src/theme/components/pagination.modifier.ts +++ b/src/theme/components/pagination.modifier.ts @@ -1,18 +1,25 @@ import { Components, Theme } from '@mui/material'; -import { anakiwa, connected, white } from '../colors'; +import { white } from '../colors'; export const MuiPagination: Components['MuiPagination'] = { styleOverrides: { - root: { - button: { - '&:hover': { - backgroundColor: anakiwa.main - }, - '&.Mui-selected': { - color: white.main, - backgroundColor: connected.main + root: ({ theme }) => { + const { + palette: { + background: { brand } } - } + } = theme; + return { + button: { + '&:hover': { + backgroundColor: brand?.hover + }, + '&.Mui-selected': { + color: white.main, + backgroundColor: brand?.default + } + } + }; } } }; diff --git a/src/theme/components/tab.modifier.ts.ts b/src/theme/components/tab.modifier.ts.ts index 68aa34f5..835ce0ea 100644 --- a/src/theme/components/tab.modifier.ts.ts +++ b/src/theme/components/tab.modifier.ts.ts @@ -1,15 +1,22 @@ import { Components, Theme } from '@mui/material'; -import { actionIcon, white } from '../colors'; export const MuiTab: Components['MuiTab'] = { styleOverrides: { - root: { - '&.Mui-selected': { - color: actionIcon.main, - backgroundColor: white.main - }, - backgroundColor: actionIcon.main, - color: white.main + root: ({ theme }) => { + const { + palette: { + text: { default: defaultText }, + background: { default: defaultBackground } + } + } = theme; + return { + '&.Mui-selected': { + color: defaultText, + backgroundColor: defaultBackground + }, + backgroundColor: defaultText, + color: defaultBackground + }; } } }; From d24df64c9b68b24b0f8a625f81fcde83f6a8be7a Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 19 Mar 2024 02:02:06 +0530 Subject: [PATCH 10/23] fix(theme): component Signed-off-by: Sudhanshu Dasgupta --- .../TransferModal/TransferList/style.tsx | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/custom/TransferModal/TransferList/style.tsx b/src/custom/TransferModal/TransferList/style.tsx index 9cb463b8..00475200 100644 --- a/src/custom/TransferModal/TransferList/style.tsx +++ b/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', From 0022543cc2e2b780bc35e4aa2e92dc7c1d1d2320 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 19 Mar 2024 02:36:02 +0530 Subject: [PATCH 11/23] fix(theme): refactor rest custom comp Signed-off-by: Sudhanshu Dasgupta --- src/custom/ErrorBoundary/ErrorBoundary.tsx | 30 ++++++++++------------ src/custom/ModalCard/style.tsx | 9 +++---- src/theme/palette.ts | 7 +++-- 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx index c80a2fe0..9e0e37cd 100644 --- a/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -4,23 +4,29 @@ import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error- 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: '#FFFFFF', + 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 (

Uh-oh!😔 Please pardon the mesh.

-
+ {(error as Error).message} -
+ We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't work, please check out our support channels{' '} diff --git a/src/custom/ModalCard/style.tsx b/src/custom/ModalCard/style.tsx index 8db54c51..063923db 100644 --- a/src/custom/ModalCard/style.tsx +++ b/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')(() => ({ @@ -48,7 +45,7 @@ export const HeaderModal = styled('div')(({ theme }) => { justifyContent: 'space-between', padding: '11px 16px', height: '52px', - fill: CULTURED, + fill: theme.palette.icon.inverse, boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)', background: `linear-gradient(90deg, ${startColor}, ${endColor})`, filter: diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 2bdeb389..31064c79 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -29,6 +29,7 @@ declare module '@mui/material/styles' { success?: Interactiveness; warning?: Interactiveness; error?: Interactiveness; + code?: string; } // Defines the extended text color options used in the palette. @@ -172,7 +173,8 @@ export const lightModePalette: PaletteOptions = { pressed: Colors.red[10], secondary: Colors.red[60], tertiary: Colors.red[70] - } + }, + code: Colors.charcoal[90] }, text: { default: Colors.charcoal[10], @@ -255,7 +257,8 @@ export const darkModePalette: PaletteOptions = { pressed: Colors.red[60], secondary: Colors.red[20], tertiary: Colors.red[10] - } + }, + code: Colors.accentGrey[90] }, text: { default: Colors.charcoal[100], From 4ac8a14314ba9020275d6b45cae62f6db40aaf54 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 19 Mar 2024 02:39:56 +0530 Subject: [PATCH 12/23] fix(reference): in color Signed-off-by: Sudhanshu Dasgupta --- src/custom/ErrorBoundary/ErrorBoundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx index 9e0e37cd..fff7c192 100644 --- a/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -21,7 +21,7 @@ const StyledLink = styled(Link)(({ theme }) => ({ const CodeMessage = styled('div')(({ theme }) => ({ backgroundColor: theme.palette.background.code, - color: '#FFFFFF', + color: theme.palette.text.tertiary, padding: '.85rem', borderRadius: '.2rem', marginBlock: '.5rem' From e93268d95d43d2ed5d1555cec54410651c53381a Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 19 Mar 2024 02:41:22 +0530 Subject: [PATCH 13/23] fix(style): mui styled Signed-off-by: Sudhanshu Dasgupta --- src/custom/ErrorBoundary/ErrorBoundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx index fff7c192..51345307 100644 --- a/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -1,4 +1,4 @@ -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'; From 19ee16660ba7587c6ff691c4780b6105f1cc80f9 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 20 Mar 2024 06:37:41 +0530 Subject: [PATCH 14/23] fix(theme): bugs Signed-off-by: Sudhanshu Dasgupta --- src/custom/ModalCard/style.tsx | 4 +++- src/theme/components/button.modifier.ts | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/custom/ModalCard/style.tsx b/src/custom/ModalCard/style.tsx index 063923db..edf06687 100644 --- a/src/custom/ModalCard/style.tsx +++ b/src/custom/ModalCard/style.tsx @@ -39,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: theme.palette.icon.inverse, + fill: iconColor, boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)', background: `linear-gradient(90deg, ${startColor}, ${endColor})`, filter: diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts index 3fff59c2..efe007fa 100644 --- a/src/theme/components/button.modifier.ts +++ b/src/theme/components/button.modifier.ts @@ -6,12 +6,12 @@ export const MuiButton: Components['MuiButton'] = { const { palette: { background: { brand }, - text: { tertiary, default: defaultText } + text: { tertiary, default: defaultText, inverse } } } = theme; return { '&.MuiButton-contained': { - color: defaultText, + color: inverse, backgroundColor: brand?.default, '&:hover': { backgroundColor: brand?.hover From 4a8117ab6b85abc8457fff5a351f90c48f7fd69f Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 20 Mar 2024 19:47:34 +0530 Subject: [PATCH 15/23] feat(readme): theme readme Signed-off-by: Sudhanshu Dasgupta --- src/theme/README.md | 75 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/src/theme/README.md b/src/theme/README.md index e69de29b..f9c47af1 100644 --- a/src/theme/README.md +++ b/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. From f6326cc0e39dc4850071ec7fe201f7032c520d5f Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 22 Mar 2024 18:20:01 +0530 Subject: [PATCH 16/23] feat(component): add component and fix styles Signed-off-by: Sudhanshu Dasgupta --- src/base/Collapse/Collapse.tsx | 5 +++++ src/base/Collapse/index.tsx | 5 +++++ src/base/ListItemText/ListItemText.tsx | 8 ++++++++ src/base/ListItemText/index.tsx | 5 +++++ src/base/index.tsx | 2 ++ src/theme/components/listitem.modifier.ts | 12 +++++++++++- src/theme/components/menuitem.modifier.ts | 8 ++++---- 7 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 src/base/Collapse/Collapse.tsx create mode 100644 src/base/Collapse/index.tsx create mode 100644 src/base/ListItemText/ListItemText.tsx create mode 100644 src/base/ListItemText/index.tsx diff --git a/src/base/Collapse/Collapse.tsx b/src/base/Collapse/Collapse.tsx new file mode 100644 index 00000000..4279b06a --- /dev/null +++ b/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 ; +} diff --git a/src/base/Collapse/index.tsx b/src/base/Collapse/index.tsx new file mode 100644 index 00000000..96e70dfc --- /dev/null +++ b/src/base/Collapse/index.tsx @@ -0,0 +1,5 @@ +import { CollapseProps } from '@mui/material'; +import { Collapse } from './Collapse'; + +export { Collapse }; +export type { CollapseProps }; diff --git a/src/base/ListItemText/ListItemText.tsx b/src/base/ListItemText/ListItemText.tsx new file mode 100644 index 00000000..158ef40d --- /dev/null +++ b/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 ; +} diff --git a/src/base/ListItemText/index.tsx b/src/base/ListItemText/index.tsx new file mode 100644 index 00000000..e9a59e7f --- /dev/null +++ b/src/base/ListItemText/index.tsx @@ -0,0 +1,5 @@ +import { ListItemTextProps } from '@mui/material'; +import { ListItemText } from './ListItemText'; + +export { ListItemText }; +export type { ListItemTextProps }; diff --git a/src/base/index.tsx b/src/base/index.tsx index a210c5a1..4ef8bff0 100644 --- a/src/base/index.tsx +++ b/src/base/index.tsx @@ -19,6 +19,7 @@ export * from './Checkbox'; export * from './Chip'; export * from './CircularProgress'; export * from './ClickAwayListener'; +export * from './Collapse'; export * from './Container'; export * from './Dialog'; export * from './DialogActions'; @@ -40,6 +41,7 @@ export * from './ListItemAvatar'; export * from './ListItemButton'; export * from './ListItemIcon'; export * from './ListItemSecondaryAction'; +export * from './ListItemText'; export * from './ListSubheader'; export * from './Menu'; export * from './MenuItem'; diff --git a/src/theme/components/listitem.modifier.ts b/src/theme/components/listitem.modifier.ts index 023b9890..349af2f1 100644 --- a/src/theme/components/listitem.modifier.ts +++ b/src/theme/components/listitem.modifier.ts @@ -1,6 +1,16 @@ import { Components, ListItemProps, Theme } from '@mui/material'; +declare module '@mui/material/ListItem' { + interface ListItemPropsVariantOverrides { + menu: true; + submenu: true; + } +} + export const MuiListItem: Components['MuiListItem'] = { + styleOverrides: { + root: {} + }, variants: [ { props: { variant: 'menu' } as ListItemProps, @@ -30,7 +40,7 @@ export const MuiListItem: Components['MuiListItem'] = { } } }, - '&:li:has(> .MuiMenuItem)': { + '&:has(> .MuiListItem-root.MuiMenuItem-root)': { backgroundColor: brand?.default }, '& svg': { diff --git a/src/theme/components/menuitem.modifier.ts b/src/theme/components/menuitem.modifier.ts index 705f49a8..c0030b15 100644 --- a/src/theme/components/menuitem.modifier.ts +++ b/src/theme/components/menuitem.modifier.ts @@ -5,20 +5,20 @@ export const MuiMenuItem: Components['MuiMenuItem'] = { root: ({ theme }) => { const { palette: { - background: { hover } + text: { tertiary } } } = theme; return { '&:hover': { '& li': { - color: hover, - fill: hover + color: tertiary, + fill: tertiary } }, '& svg': { '&:hover': { - fill: hover + fill: tertiary } }, From d0711ac709e1d1471dc7f1d6444d6e4190c50e64 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 22 Mar 2024 19:02:28 +0530 Subject: [PATCH 17/23] feat(component): add cssbaseline comp Signed-off-by: Sudhanshu Dasgupta --- src/base/CssBaseLine/CssBaseLine.tsx | 8 ++++++++ src/base/CssBaseLine/index.tsx | 5 +++++ src/base/index.tsx | 1 + 3 files changed, 14 insertions(+) create mode 100644 src/base/CssBaseLine/CssBaseLine.tsx create mode 100644 src/base/CssBaseLine/index.tsx diff --git a/src/base/CssBaseLine/CssBaseLine.tsx b/src/base/CssBaseLine/CssBaseLine.tsx new file mode 100644 index 00000000..5e93be8d --- /dev/null +++ b/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 ; +} diff --git a/src/base/CssBaseLine/index.tsx b/src/base/CssBaseLine/index.tsx new file mode 100644 index 00000000..94ea1a71 --- /dev/null +++ b/src/base/CssBaseLine/index.tsx @@ -0,0 +1,5 @@ +import { CssBaselineProps } from '@mui/material'; +import { CssBaseline } from './CssBaseLine'; + +export { CssBaseline }; +export type { CssBaselineProps }; diff --git a/src/base/index.tsx b/src/base/index.tsx index 4ef8bff0..0b17e603 100644 --- a/src/base/index.tsx +++ b/src/base/index.tsx @@ -21,6 +21,7 @@ export * from './CircularProgress'; export * from './ClickAwayListener'; export * from './Collapse'; export * from './Container'; +export * from './CssBaseLine'; export * from './Dialog'; export * from './DialogActions'; export * from './DialogContent'; From 0a62b664147fdc43d34d782dd103f33358758d3a Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 1 Apr 2024 13:15:45 +0530 Subject: [PATCH 18/23] fix(colors): fix correct colors Signed-off-by: Sudhanshu Dasgupta --- src/theme/colors/colors.ts | 21 ++++++++++----------- src/theme/palette.ts | 30 +++++++++++++++++------------- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index fef11e56..ee85b809 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -49,12 +49,11 @@ export const common = { }; export const keppel = { - 80: '#daf3eb', - 70: '#00B39F', + 70: '#daf3eb', 60: '#93E6D1', 50: '#41CCB3', 40: '#00B39F', - 30: '#008c81', + 30: '#007763', 20: '#006661', 10: '#00403f' }; @@ -70,7 +69,7 @@ export const carribean = { }; export const saffron = { - 70: '#F8E2A6', + 70: '#FFFEE6', 60: '#fffbbd', 50: '#ffeb6b', 40: '#ebc017', @@ -111,13 +110,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 = { diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 31064c79..122118ac 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -23,6 +23,7 @@ declare module '@mui/material/styles' { heavy: string; light: string; }; + inverse?: string; brand?: Interactiveness; cta?: Interactiveness; info?: Interactiveness; @@ -52,6 +53,7 @@ declare module '@mui/material/styles' { heavy: string; light: string; }; + inverse?: string; brand?: Interactiveness; cta?: Interactiveness; info?: Interactiveness; @@ -70,6 +72,7 @@ declare module '@mui/material/styles' { heavy: string; light: string; }; + inverse?: string; brand?: Interactiveness; cta?: Interactiveness; info?: Interactiveness; @@ -128,11 +131,12 @@ export const lightModePalette: PaletteOptions = { heavy: alpha(Colors.charcoal[90], 0.8), light: alpha(Colors.charcoal[90], 0.5) }, + inverse: Colors.charcoal[10], brand: { default: Colors.keppel[30], - hover: Colors.keppel[40], + hover: Colors.keppel[50], disabled: Colors.charcoal[90], - pressed: Colors.keppel[10], + pressed: Colors.keppel[60], secondary: Colors.keppel[50], tertiary: Colors.keppel[70] }, @@ -140,14 +144,14 @@ export const lightModePalette: PaletteOptions = { default: Colors.carribean[30] }, cta: { - default: Colors.saffron[30], - hover: Colors.keppel[40], - pressed: Colors.keppel[50], - secondary: Colors.keppel[60], - tertiary: Colors.keppel[70] + default: Colors.saffron[40], + hover: Colors.saffron[50], + pressed: Colors.saffron[60], + secondary: Colors.saffron[60], + tertiary: Colors.saffron[70] }, info: { - default: Colors.blue[30], + default: Colors.blue[40], hover: Colors.blue[20], pressed: Colors.blue[10], secondary: Colors.blue[60], @@ -178,11 +182,11 @@ export const lightModePalette: PaletteOptions = { }, text: { default: Colors.charcoal[10], - secondary: Colors.charcoal[90], - tertiary: Colors.charcoal[50], + secondary: Colors.charcoal[40], + tertiary: Colors.charcoal[70], inverse: Colors.charcoal[100], brand: Colors.accentGrey[40], - info: Colors.blue[30], + info: Colors.blue[40], success: Colors.green[30], warning: Colors.yellow[30], error: Colors.red[30] @@ -190,12 +194,12 @@ export const lightModePalette: PaletteOptions = { border: { default: Colors.charcoal[90], strong: Colors.charcoal[30], - brand: Colors.keppel[30], + brand: Colors.keppel[40], normal: Colors.charcoal[60] }, icon: { default: Colors.accentGrey[10], - brand: Colors.keppel[30], + brand: Colors.keppel[40], inverse: Colors.charcoal[100], weather: Colors.accentGrey[50], disabled: Colors.charcoal[70] From 7566f02225a121b445e57f947d14ec6219af935d Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 1 Apr 2024 13:30:31 +0530 Subject: [PATCH 19/23] feat(colors): additional colors Signed-off-by: Sudhanshu Dasgupta --- src/theme/colors/colors.ts | 1 + src/theme/palette.ts | 84 +++++++++++++++++++++++++++++++++++--- 2 files changed, 79 insertions(+), 6 deletions(-) diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index ee85b809..b9d11789 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -95,6 +95,7 @@ export const charcoal = { }; export const accentGrey = { + 100: '#F6F8F8', 90: '#E8EFF3', 80: '#C9DBE3', 70: '#ABBDC5', diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 122118ac..b9c70715 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -23,6 +23,12 @@ declare module '@mui/material/styles' { heavy: string; light: string; }; + //additional color palette {neutral} + neutral?: { + default: string; + hover: string; + pressed: string; + }; inverse?: string; brand?: Interactiveness; cta?: Interactiveness; @@ -44,6 +50,10 @@ declare module '@mui/material/styles' { success?: string; warning?: string; error?: string; + neutral?: { + default: string; + alt: string; + }; } // Defines the color options for the palette @@ -53,6 +63,12 @@ declare module '@mui/material/styles' { heavy: string; light: string; }; + neutral?: { + default: string; + hover: string; + pressed: string; + alt: string; + }; inverse?: string; brand?: Interactiveness; cta?: Interactiveness; @@ -72,6 +88,12 @@ declare module '@mui/material/styles' { heavy: string; light: string; }; + neutral?: { + default: string; + hover: string; + pressed: string; + alt: string; + }; inverse?: string; brand?: Interactiveness; cta?: Interactiveness; @@ -93,6 +115,10 @@ declare module '@mui/material/styles' { strong: string; brand: string; normal: string; + neutral?: { + default: string; + alt: string; + }; }; icon: { default: string; @@ -100,6 +126,10 @@ declare module '@mui/material/styles' { inverse: string; weather: string; disabled: string; + neutral?: { + default: string; + alt: string; + }; }; } @@ -110,6 +140,10 @@ declare module '@mui/material/styles' { strong: string; brand: string; normal: string; + neutral?: { + default: string; + alt: string; + }; }; icon: { default: string; @@ -117,6 +151,10 @@ declare module '@mui/material/styles' { inverse: string; weather: string; disabled: string; + neutral?: { + default: string; + alt: string; + }; }; } } @@ -131,6 +169,11 @@ export const lightModePalette: PaletteOptions = { heavy: alpha(Colors.charcoal[90], 0.8), light: alpha(Colors.charcoal[90], 0.5) }, + neutral: { + default: Colors.charcoal[40], + hover: Colors.charcoal[30], + pressed: Colors.charcoal[20] + }, inverse: Colors.charcoal[10], brand: { default: Colors.keppel[30], @@ -189,20 +232,32 @@ export const lightModePalette: PaletteOptions = { info: Colors.blue[40], success: Colors.green[30], warning: Colors.yellow[30], - error: Colors.red[30] + error: Colors.red[30], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + } }, border: { default: Colors.charcoal[90], strong: Colors.charcoal[30], brand: Colors.keppel[40], - normal: Colors.charcoal[60] + normal: Colors.charcoal[60], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + } }, icon: { default: Colors.accentGrey[10], brand: Colors.keppel[40], inverse: Colors.charcoal[100], weather: Colors.accentGrey[50], - disabled: Colors.charcoal[70] + disabled: Colors.charcoal[70], + neutral: { + default: Colors.charcoal[40], + alt: Colors.charcoal[40] + } } }; @@ -216,6 +271,11 @@ export const darkModePalette: PaletteOptions = { heavy: alpha(Colors.charcoal[10], 0.8), light: alpha(Colors.charcoal[10], 0.5) }, + neutral: { + default: Colors.accentGrey[100], + hover: Colors.charcoal[90], + pressed: Colors.charcoal[80] + }, brand: { default: Colors.keppel[40], hover: Colors.keppel[50], @@ -273,13 +333,21 @@ export const darkModePalette: PaletteOptions = { info: Colors.blue[40], success: Colors.green[40], warning: Colors.yellow[40], - error: Colors.red[40] + error: Colors.red[40], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + } }, border: { default: Colors.accentGrey[10], strong: Colors.accentGrey[60], brand: Colors.keppel[40], - normal: Colors.accentGrey[30] + normal: Colors.accentGrey[30], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + } }, icon: { @@ -287,6 +355,10 @@ export const darkModePalette: PaletteOptions = { brand: Colors.keppel[40], inverse: Colors.charcoal[10], weather: Colors.saffron[40], - disabled: Colors.charcoal[50] + disabled: Colors.charcoal[50], + neutral: { + default: Colors.accentGrey[100], + alt: Colors.keppel[40] + } } }; From 8dd231c4719267d49607032f3a64114d9b8631de Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 1 Apr 2024 14:18:02 +0530 Subject: [PATCH 20/23] feat(Typography): add typography Signed-off-by: Sudhanshu Dasgupta --- src/theme/typography.ts | 137 +++++++++++++++++++++++++++------------- 1 file changed, 94 insertions(+), 43 deletions(-) diff --git a/src/theme/typography.ts b/src/theme/typography.ts index c2ed4312..be2c7e33 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -1,72 +1,123 @@ -import { PaletteMode } from '@mui/material'; +import { PaletteMode, createTheme } from '@mui/material'; import { TypographyOptions } from '@mui/material/styles/createTypography'; import { common } from './colors'; +declare module '@mui/material/styles' { + interface TypographyVariants { + textH1Bold: React.CSSProperties; + textH2Medium: React.CSSProperties; + textH3Medium: React.CSSProperties; + textB1Regular: React.CSSProperties; + textB2SemiBold: React.CSSProperties; + textB3Regular: React.CSSProperties; + textL1Bold: React.CSSProperties; + textL2Regular: React.CSSProperties; + textC1Regular: React.CSSProperties; + textC2Regular: React.CSSProperties; + } + + // allow configuration using `createTheme` + interface TypographyVariantsOptions { + textH1Bold: React.CSSProperties; + textH2Medium: React.CSSProperties; + textH3Medium: React.CSSProperties; + textB1Regular: React.CSSProperties; + textB2SemiBold: React.CSSProperties; + textB3Regular: React.CSSProperties; + textL1Bold: React.CSSProperties; + textL2Regular: React.CSSProperties; + textC1Regular: React.CSSProperties; + textC2Regular: React.CSSProperties; + } +} + +const theme = createTheme(); + export const typography = (mode: PaletteMode): TypographyOptions => { return { fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - body1: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '16px' - }, - body2: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '16px', - fontWeight: 'normal', - lineHeight: '28px' - }, - h1: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '64px', - lineHeight: '80px', - fontWeight: 'bold' - }, - h2: { + textH1Bold: { fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), fontSize: '52px', lineHeight: '64px', - fontWeight: 'bold' + fontWeight: 'bold', + [theme.breakpoints.down('sm')]: { + fontSize: '32px', + lineHeight: '40px' + } }, - h3: { + textH2Medium: { fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), fontSize: '32px', lineHeight: '40px', - fontWeight: 'bold' + fontWeight: 'medium', + [theme.breakpoints.down('sm')]: { + fontSize: '24px', + lineHeight: '36px' + } }, - h4: { + textH3Medium: { fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), fontSize: '1.5rem', lineHeight: '2.25rem', - fontWeight: 600 + fontWeight: 'medium', + [theme.breakpoints.down('sm')]: { + fontSize: '1rem', + lineHeight: '1.75rem' + } }, - h5: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + textB1Regular: { + fontFamily: ['Open Sans'].join(','), color: mode === 'light' ? common.black : common.white, fontSize: '1rem', - fontWeight: 'bold', - lineHeight: '1.75rem' + fontWeight: 'regular', + lineHeight: '1.75rem', + [theme.breakpoints.down('sm')]: { + fontSize: '1rem', + lineHeight: '1.75rem' + } }, - h6: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + textB2SemiBold: { + fontFamily: ['Open Sans'].join(','), color: mode === 'light' ? common.black : common.white, - fontSize: '12px', - fontWeight: 'bold', - lineHeight: '16px', - textTransform: 'uppercase' + fontSize: '1rem', + fontWeight: 'semi-bold', + lineHeight: '1.75rem', + [theme.breakpoints.down('sm')]: { + fontSize: '1rem', + lineHeight: '1.75rem' + } }, - subtitle1: { + textB3Regular: { fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '16px', - fontWeight: 500, - lineHeight: '28px' + fontSize: '0.875rem', + fontWeight: 'regular', + lineHeight: '1.5rem' }, - subtitle2: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), - fontSize: '12px', - fontWeight: 500, - lineHeight: '24px' + textL1Bold: { + fontFamily: ['Qanelas Soft'].join(','), + fontSize: '0.75rem', + fontWeight: 'bold', + lineHeight: '1rem' + }, + textL2Regular: { + fontFamily: ['Open Sans'].join(','), + fontSize: '0.75rem', + fontWeight: 'regular', + lineHeight: '1.5rem' + }, + textC1Regular: { + fontFamily: ['Consolas'].join(','), + fontSize: '0.75rem', + fontWeight: 'regular', + lineHeight: '1.5rem' + }, + textC2Regular: { + fontFamily: ['Consolas'].join(','), + fontSize: '1rem', + fontWeight: 'regular', + lineHeight: '1.75rem' }, - button: {}, caption: {}, overline: {} }; From 4dc4a673dd78a7ae8ac984e2ff33649d49045c92 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 5 Apr 2024 00:39:26 +0530 Subject: [PATCH 21/23] fix(typo): button typography Signed-off-by: Sudhanshu Dasgupta --- src/theme/components/button.modifier.ts | 8 +++++--- src/theme/typography.ts | 1 + 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts index efe007fa..9ba9bc6a 100644 --- a/src/theme/components/button.modifier.ts +++ b/src/theme/components/button.modifier.ts @@ -6,12 +6,14 @@ export const MuiButton: Components['MuiButton'] = { const { palette: { background: { brand }, - text: { tertiary, default: defaultText, inverse } - } + text: { tertiary, default: defaultText } + }, + typography: { textB2SemiBold } } = theme; return { + ...textB2SemiBold, '&.MuiButton-contained': { - color: inverse, + color: defaultText, backgroundColor: brand?.default, '&:hover': { backgroundColor: brand?.hover diff --git a/src/theme/typography.ts b/src/theme/typography.ts index be2c7e33..88834d77 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -83,6 +83,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => { fontSize: '1rem', fontWeight: 'semi-bold', lineHeight: '1.75rem', + textTransform: 'capitalize', [theme.breakpoints.down('sm')]: { fontSize: '1rem', lineHeight: '1.75rem' From cdf72f6ebabfd33024e0efdb4a10387048c15f31 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sun, 7 Apr 2024 00:46:07 +0530 Subject: [PATCH 22/23] fix(theme): update and fix Signed-off-by: Sudhanshu Dasgupta --- src/base/OutlinedInput/OutlinedInput.tsx | 8 ++++++ src/base/OutlinedInput/index.tsx | 5 ++++ src/base/index.tsx | 1 + src/custom/TooltipIcon.tsx | 2 +- src/theme/colors/index.ts | 2 ++ src/theme/palette.ts | 28 +++++++++++++++++++-- src/theme/typography.ts | 31 ++++++++++++------------ 7 files changed, 59 insertions(+), 18 deletions(-) create mode 100644 src/base/OutlinedInput/OutlinedInput.tsx create mode 100644 src/base/OutlinedInput/index.tsx diff --git a/src/base/OutlinedInput/OutlinedInput.tsx b/src/base/OutlinedInput/OutlinedInput.tsx new file mode 100644 index 00000000..a8edd7df --- /dev/null +++ b/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 ; +} diff --git a/src/base/OutlinedInput/index.tsx b/src/base/OutlinedInput/index.tsx new file mode 100644 index 00000000..4904b277 --- /dev/null +++ b/src/base/OutlinedInput/index.tsx @@ -0,0 +1,5 @@ +import { OutlinedInputProps } from '@mui/material'; +import { OutlinedInput } from './OutlinedInput'; + +export { OutlinedInput }; +export type { OutlinedInputProps }; diff --git a/src/base/index.tsx b/src/base/index.tsx index 0b17e603..a8619169 100644 --- a/src/base/index.tsx +++ b/src/base/index.tsx @@ -47,6 +47,7 @@ export * from './ListSubheader'; export * from './Menu'; export * from './MenuItem'; export * from './MenuList'; +export * from './OutlinedInput'; export * from './Pagination'; export * from './Paper'; export * from './Popper'; diff --git a/src/custom/TooltipIcon.tsx b/src/custom/TooltipIcon.tsx index 49e0005f..c93d18fb 100644 --- a/src/custom/TooltipIcon.tsx +++ b/src/custom/TooltipIcon.tsx @@ -5,7 +5,7 @@ import Tooltip from '../patches/Tooltip'; interface TooltipIconProps { title: string; - onClick: (event: React.MouseEvent) => void; + onClick?: (event: React.MouseEvent) => void; icon: React.ReactNode; arrow?: boolean; style?: React.CSSProperties; diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts index 6a921643..e25a304c 100644 --- a/src/theme/colors/index.ts +++ b/src/theme/colors/index.ts @@ -60,6 +60,8 @@ export { red, redDelete, saffron, + slateGray, + socialIcons, tabMenu, tableBackgroundHover, white, diff --git a/src/theme/palette.ts b/src/theme/palette.ts index b9c70715..9d2a3be7 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -14,6 +14,7 @@ declare module '@mui/material/styles' { // Defines the extended background color options used in the palette. interface TypeBackground { secondary?: string; + supplementary?: string; graphics?: { default: string; }; @@ -54,11 +55,15 @@ declare module '@mui/material/styles' { default: string; alt: string; }; + constant?: { + white: string; + }; } // Defines the color options for the palette interface PaletteColor { secondary?: string; + supplementary?: string; blur?: { heavy: string; light: string; @@ -69,6 +74,9 @@ declare module '@mui/material/styles' { pressed: string; alt: string; }; + constant?: { + white: string; + }; inverse?: string; brand?: Interactiveness; cta?: Interactiveness; @@ -84,6 +92,7 @@ declare module '@mui/material/styles' { // Defines the simple palette color options. interface SimplePaletteColorOptions { secondary?: string; + supplementary?: string; blur?: { heavy: string; light: string; @@ -94,6 +103,9 @@ declare module '@mui/material/styles' { pressed: string; alt: string; }; + constant?: { + white: string; + }; inverse?: string; brand?: Interactiveness; cta?: Interactiveness; @@ -122,6 +134,7 @@ declare module '@mui/material/styles' { }; icon: { default: string; + secondary: string; brand: string; inverse: string; weather: string; @@ -147,6 +160,7 @@ declare module '@mui/material/styles' { }; icon: { default: string; + secondary: string; brand: string; inverse: string; weather: string; @@ -165,6 +179,7 @@ export const lightModePalette: PaletteOptions = { secondary: Colors.accentGrey[90], tertiary: Colors.accentGrey[80], hover: Colors.charcoal[90], + supplementary: Colors.accentGrey[40], blur: { heavy: alpha(Colors.charcoal[90], 0.8), light: alpha(Colors.charcoal[90], 0.5) @@ -176,7 +191,7 @@ export const lightModePalette: PaletteOptions = { }, inverse: Colors.charcoal[10], brand: { - default: Colors.keppel[30], + default: Colors.keppel[40], hover: Colors.keppel[50], disabled: Colors.charcoal[90], pressed: Colors.keppel[60], @@ -228,7 +243,7 @@ export const lightModePalette: PaletteOptions = { secondary: Colors.charcoal[40], tertiary: Colors.charcoal[70], inverse: Colors.charcoal[100], - brand: Colors.accentGrey[40], + brand: Colors.keppel[40], info: Colors.blue[40], success: Colors.green[30], warning: Colors.yellow[30], @@ -236,6 +251,9 @@ export const lightModePalette: PaletteOptions = { neutral: { default: Colors.charcoal[40], alt: Colors.charcoal[40] + }, + constant: { + white: Colors.charcoal[100] } }, border: { @@ -250,6 +268,7 @@ export const lightModePalette: PaletteOptions = { }, icon: { default: Colors.accentGrey[10], + secondary: Colors.charcoal[40], brand: Colors.keppel[40], inverse: Colors.charcoal[100], weather: Colors.accentGrey[50], @@ -267,6 +286,7 @@ export const darkModePalette: PaletteOptions = { secondary: Colors.accentGrey[10], tertiary: Colors.accentGrey[30], hover: Colors.charcoal[20], + supplementary: Colors.accentGrey[40], blur: { heavy: alpha(Colors.charcoal[10], 0.8), light: alpha(Colors.charcoal[10], 0.5) @@ -337,6 +357,9 @@ export const darkModePalette: PaletteOptions = { neutral: { default: Colors.accentGrey[100], alt: Colors.keppel[40] + }, + constant: { + white: Colors.charcoal[100] } }, border: { @@ -352,6 +375,7 @@ export const darkModePalette: PaletteOptions = { icon: { default: Colors.accentGrey[90], + secondary: Colors.charcoal[80], brand: Colors.keppel[40], inverse: Colors.charcoal[10], weather: Colors.saffron[40], diff --git a/src/theme/typography.ts b/src/theme/typography.ts index 88834d77..ce99a375 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -37,40 +37,41 @@ export const typography = (mode: PaletteMode): TypographyOptions => { return { fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), textH1Bold: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + fontFamily: ['Qanelas Soft'].join(','), fontSize: '52px', lineHeight: '64px', - fontWeight: 'bold', + fontWeight: 700, [theme.breakpoints.down('sm')]: { fontSize: '32px', lineHeight: '40px' } }, textH2Medium: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + fontFamily: ['Qanelas Soft'].join(','), fontSize: '32px', lineHeight: '40px', - fontWeight: 'medium', + fontWeight: 500, [theme.breakpoints.down('sm')]: { fontSize: '24px', lineHeight: '36px' } }, textH3Medium: { - fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + fontFamily: ['Qanelas Soft'].join(','), fontSize: '1.5rem', lineHeight: '2.25rem', - fontWeight: 'medium', + fontWeight: 500, [theme.breakpoints.down('sm')]: { fontSize: '1rem', - lineHeight: '1.75rem' + lineHeight: '1.75rem', + fontWeight: 700 } }, textB1Regular: { fontFamily: ['Open Sans'].join(','), color: mode === 'light' ? common.black : common.white, fontSize: '1rem', - fontWeight: 'regular', + fontWeight: 400, lineHeight: '1.75rem', [theme.breakpoints.down('sm')]: { fontSize: '1rem', @@ -81,7 +82,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => { fontFamily: ['Open Sans'].join(','), color: mode === 'light' ? common.black : common.white, fontSize: '1rem', - fontWeight: 'semi-bold', + fontWeight: 600, lineHeight: '1.75rem', textTransform: 'capitalize', [theme.breakpoints.down('sm')]: { @@ -90,33 +91,33 @@ export const typography = (mode: PaletteMode): TypographyOptions => { } }, textB3Regular: { - fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + fontFamily: ['Open Sans'].join(','), fontSize: '0.875rem', - fontWeight: 'regular', + fontWeight: 400, lineHeight: '1.5rem' }, textL1Bold: { fontFamily: ['Qanelas Soft'].join(','), fontSize: '0.75rem', - fontWeight: 'bold', + fontWeight: 700, lineHeight: '1rem' }, textL2Regular: { fontFamily: ['Open Sans'].join(','), fontSize: '0.75rem', - fontWeight: 'regular', + fontWeight: 400, lineHeight: '1.5rem' }, textC1Regular: { fontFamily: ['Consolas'].join(','), fontSize: '0.75rem', - fontWeight: 'regular', + fontWeight: 400, lineHeight: '1.5rem' }, textC2Regular: { fontFamily: ['Consolas'].join(','), fontSize: '1rem', - fontWeight: 'regular', + fontWeight: 400, lineHeight: '1.75rem' }, caption: {}, From 23ae2069b08a72a305597bf460042dafcc74a439 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 8 Apr 2024 12:52:48 +0530 Subject: [PATCH 23/23] fix(add): index Signed-off-by: Sudhanshu Dasgupta --- src/theme/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 755129e8..5eb98ba9 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -1,4 +1,5 @@ export { darkModePalette, lightModePalette } from './palette'; +export { typography } from './typography'; export { default as SistentThemeProvider } from './ThemeProvider'; export * from './colors';