From 5fb810bd5abe7c1010f49a6b758b25ec9d1a1330 Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Sat, 23 May 2026 01:47:38 +0530 Subject: [PATCH] common themeConfig.ts --- src/Home.tsx | 13 +- src/components/Dashboard/Dashboard.models.ts | 25 +--- src/components/Dashboard/Dashboard.view.tsx | 41 +----- .../HistoryChart/HistoryChart.view.tsx | 2 +- .../LatestItems/LatestItems.view.tsx | 3 +- .../ProgressCard/ProgressCard.view.tsx | 14 +- src/dashboard-config.ts | 28 ---- src/shared-theme/AppTheme.tsx | 25 +++- src/shared-theme/customizations/feedback.tsx | 4 +- src/shared-theme/customizations/inputs.tsx | 30 ++-- .../customizations/navigation.tsx | 20 +-- src/shared-theme/customizations/surfaces.ts | 6 +- src/shared-theme/themeConfig.ts | 72 +++++++++ src/shared-theme/themePrimitives.ts | 139 ++++++++++++------ 14 files changed, 243 insertions(+), 179 deletions(-) create mode 100644 src/shared-theme/themeConfig.ts diff --git a/src/Home.tsx b/src/Home.tsx index 356a295..e4aa1a7 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import { Box, Typography, Button, Container, Stack } from "@mui/material"; +import { useTheme, alpha } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; export default function Home() { const navigate = useNavigate(); + const theme = useTheme(); return ( - theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.03)" : "rgba(255, 255, 255, 0.6)", + backgroundColor: (t) => alpha(t.palette.common.white, t.palette.mode === "dark" ? 0.04 : 0.6), border: "1px solid", borderColor: "divider", borderRadius: 4, - boxShadow: (theme) => - theme.palette.mode === "dark" - ? "0 8px 32px 0 rgba(0, 0, 0, 0.37)" + boxShadow: (t) => + t.palette.mode === "dark" + ? "0 8px 32px 0 rgba(0, 0, 0, 0.5)" : "0 8px 32px 0 rgba(31, 38, 135, 0.07)", }} > @@ -94,7 +95,7 @@ export default function Home() { transition: "transform 0.2s ease-in-out, box-shadow 0.2s", "&:hover": { transform: "translateY(-3px)", - boxShadow: "0 8px 20px rgba(236,72,153,0.4)", + boxShadow: (t) => `0 8px 20px ${alpha(t.palette.primary.main, 0.4)}`, }, }} > diff --git a/src/components/Dashboard/Dashboard.models.ts b/src/components/Dashboard/Dashboard.models.ts index 9af36fd..9c7c625 100644 --- a/src/components/Dashboard/Dashboard.models.ts +++ b/src/components/Dashboard/Dashboard.models.ts @@ -32,22 +32,8 @@ export interface DashboardSection { settings?: Record; } -export interface ColorDefinition { - primary: string; - background: string; - text: string; -} - -export interface ThemeAwarePalette { - light: ColorDefinition; - dark: ColorDefinition; -} - export interface DashboardConfig { sections: DashboardSection[]; - style: { - palette: Record; - }; } export interface DashboardViewProps { @@ -58,6 +44,11 @@ export interface DashboardViewProps { isFetching: boolean; } +export interface ColorScheme { + primary: string; + surface: string; + text: string; +} export interface ComponentProps extends DashboardSection { reportData: ReportData; @@ -66,9 +57,5 @@ export interface ComponentProps extends DashboardSection { stateSetters: DashboardStateSetters; isFetching: boolean; - colorScheme: { - primary: string; - light: string; - text: string; - }; + colorScheme: ColorScheme; } diff --git a/src/components/Dashboard/Dashboard.view.tsx b/src/components/Dashboard/Dashboard.view.tsx index bcc37cb..2ba5427 100644 --- a/src/components/Dashboard/Dashboard.view.tsx +++ b/src/components/Dashboard/Dashboard.view.tsx @@ -18,51 +18,20 @@ export default function DashboardView({ isFetching, }: DashboardViewProps) { const theme = useTheme(); - const themeMode = theme.palette.mode; const { flow, selectedGroupKey, } = state; - const colors = React.useMemo(() => { - const palette = config.style.palette[flow]; - const modeColors = palette[themeMode]; - - return { - primary: modeColors.primary, - light: modeColors.background || alpha(modeColors.primary, 0.1), - text: - modeColors.text || - (themeMode === "light" ? theme.palette.text.primary : "#fff"), - }; - - // if (modeColors) { - // return { - // primary: modeColors.primary, - // light: modeColors.background || alpha(modeColors.primary, 0.1), - // text: - // modeColors.text || - // (themeMode === "light" ? theme.palette.text.primary : "#fff"), - // }; - // } - // - // const themeColor = - // flow === "outflows" ? theme.palette.error : theme.palette.success; - // - // return { - // primary: themeColor.main, - // light: alpha(themeColor.main, themeMode === "light" ? 0.08 : 0.15), - // text: themeColor.main, - // }; - }, [config.style?.palette, flow, themeMode, theme.palette]); + const colorScheme = flow === "outflows" ? theme.palette.flows.outflows : theme.palette.flows.inflows; return ( @@ -125,7 +94,7 @@ export default function DashboardView({ stateSetters={stateSetters} isFetching={isFetching} - colorScheme={colors} + colorScheme={colorScheme} /> ); diff --git a/src/components/HistoryChart/HistoryChart.view.tsx b/src/components/HistoryChart/HistoryChart.view.tsx index c02923c..954ca69 100644 --- a/src/components/HistoryChart/HistoryChart.view.tsx +++ b/src/components/HistoryChart/HistoryChart.view.tsx @@ -76,7 +76,7 @@ export default function HistoryChartView({ boxShadow: "none", border: "1px solid", borderColor: "divider", - bgcolor: isDark ? "background.paper" : colorScheme.light, + bgcolor: isDark ? "background.paper" : colorScheme.surface, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto", diff --git a/src/components/LatestItems/LatestItems.view.tsx b/src/components/LatestItems/LatestItems.view.tsx index 2932573..50b3d00 100644 --- a/src/components/LatestItems/LatestItems.view.tsx +++ b/src/components/LatestItems/LatestItems.view.tsx @@ -9,6 +9,7 @@ import { Box, IconButton, } from "@mui/material"; +import { alpha } from "@mui/material/styles"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import { LatestItemsViewProps } from "./LatestItems.props"; @@ -46,7 +47,7 @@ export default function LatestItemsView({ {title} @@ -83,7 +80,6 @@ export default function ProgressCardView({ sx={{ mb: 0.5, lineHeight: 1.2, - textShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "none", }} > {formattedProgress} @@ -92,7 +88,7 @@ export default function ProgressCardView({ @@ -118,7 +114,7 @@ export default function ProgressCardView({ height: settings.compact ? 6 : 10, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)", + backgroundColor: alpha(theme.palette.divider, 0.5), }, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5, diff --git a/src/dashboard-config.ts b/src/dashboard-config.ts index 43dc137..af42bad 100644 --- a/src/dashboard-config.ts +++ b/src/dashboard-config.ts @@ -37,32 +37,4 @@ export const configuration: DashboardConfig = { component: LatestItems, }, ], - style: { - palette: { - outflows: { - light: { - primary: "#d32f2f", - background: "#fdecea", - text: "#b71c1c" - }, - dark: { - primary: "#f44336", - background: "rgba(244, 67, 54, 0.15)", - text: "#ffcdd2" - } - }, - inflows: { - light: { - primary: "#2e7d32", - background: "#e8f5e9", - text: "#1b5e20" - }, - dark: { - primary: "#4caf50", - background: "rgba(76, 175, 80, 0.15)", - text: "#c8e6c9" - } - } - } - } }; diff --git a/src/shared-theme/AppTheme.tsx b/src/shared-theme/AppTheme.tsx index 25765a0..599ef42 100644 --- a/src/shared-theme/AppTheme.tsx +++ b/src/shared-theme/AppTheme.tsx @@ -3,9 +3,11 @@ import { ThemeProvider, createTheme, CssBaseline, + Box, } from "@mui/material"; import { getDesignTokens } from "./themePrimitives"; +import { getSemanticColors } from "./themeConfig"; import { inputsCustomizations } from "./customizations/inputs"; import { dataDisplayCustomizations } from "./customizations/dataDisplay"; @@ -55,10 +57,16 @@ export default function AppTheme({ [mode, toggleColorMode] ); + const semantic = React.useMemo( + () => getSemanticColors(mode), + [mode] + ); + const theme = React.useMemo( () => createTheme({ ...getDesignTokens(mode), + semantic, components: { ...inputsCustomizations, @@ -68,14 +76,27 @@ export default function AppTheme({ ...surfacesCustomizations, }, }), - [mode] + [mode, semantic] ); return ( - {children} + + {children} + ); diff --git a/src/shared-theme/customizations/feedback.tsx b/src/shared-theme/customizations/feedback.tsx index 6d475c9..5eb04db 100644 --- a/src/shared-theme/customizations/feedback.tsx +++ b/src/shared-theme/customizations/feedback.tsx @@ -14,8 +14,8 @@ export const feedbackCustomizations: Components = { color: orange[500], }, ...theme.applyStyles('dark', { - backgroundColor: `${alpha(orange[900], 0.5)}`, - border: `1px solid ${alpha(orange[800], 0.5)}`, + backgroundColor: alpha(orange[900], 0.35), + border: `1px solid ${alpha(orange[800], 0.3)}`, }), }), }, diff --git a/src/shared-theme/customizations/inputs.tsx b/src/shared-theme/customizations/inputs.tsx index b384563..e9d2ba5 100644 --- a/src/shared-theme/customizations/inputs.tsx +++ b/src/shared-theme/customizations/inputs.tsx @@ -125,15 +125,15 @@ export const inputsCustomizations: Components = { backgroundColor: gray[200], }, ...theme.applyStyles('dark', { - backgroundColor: gray[800], - borderColor: gray[700], + backgroundColor: 'hsla(0, 0%, 100%, 0.06)', + borderColor: (theme.vars || theme).palette.divider, '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], + backgroundColor: 'hsla(0, 0%, 100%, 0.1)', + borderColor: 'hsla(0, 0%, 100%, 0.15)', }, '&:active': { - backgroundColor: gray[900], + backgroundColor: 'hsla(0, 0%, 100%, 0.1)', }, }), }, @@ -183,12 +183,12 @@ export const inputsCustomizations: Components = { backgroundColor: gray[200], }, ...theme.applyStyles('dark', { - color: gray[50], + color: 'hsl(0, 0%, 92%)', '&:hover': { - backgroundColor: gray[700], + backgroundColor: 'hsla(0, 0%, 100%, 0.08)', }, '&:active': { - backgroundColor: alpha(gray[700], 0.7), + backgroundColor: 'hsla(0, 0%, 100%, 0.12)', }, }), }, @@ -241,14 +241,14 @@ export const inputsCustomizations: Components = { backgroundColor: gray[200], }, ...theme.applyStyles('dark', { - backgroundColor: gray[800], - borderColor: gray[700], + backgroundColor: 'hsla(0, 0%, 100%, 0.06)', + borderColor: (theme.vars || theme).palette.divider, '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], + backgroundColor: 'hsla(0, 0%, 100%, 0.1)', + borderColor: 'hsla(0, 0%, 100%, 0.15)', }, '&:active': { - backgroundColor: gray[900], + backgroundColor: 'hsla(0, 0%, 100%, 0.1)', }, }), variants: [ @@ -288,7 +288,7 @@ export const inputsCustomizations: Components = { [`& .${toggleButtonGroupClasses.selected}`]: { color: '#fff', }, - boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + boxShadow: `0 2px 8px ${alpha(brand[700], 0.3)}`, }), }), }, @@ -302,7 +302,7 @@ export const inputsCustomizations: Components = { fontWeight: 500, ...theme.applyStyles('dark', { color: gray[400], - boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)', [`&.${toggleButtonClasses.selected}`]: { color: brand[300], }, diff --git a/src/shared-theme/customizations/navigation.tsx b/src/shared-theme/customizations/navigation.tsx index 3cb9713..a82fc21 100644 --- a/src/shared-theme/customizations/navigation.tsx +++ b/src/shared-theme/customizations/navigation.tsx @@ -49,9 +49,8 @@ export const navigationCustomizations: Components = { }, }, ...theme.applyStyles('dark', { - background: gray[900], - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + background: (theme.vars || theme).palette.background.paper, + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)', }), }), }, @@ -84,17 +83,17 @@ export const navigationCustomizations: Components = { ...theme.applyStyles('dark', { borderRadius: (theme.vars || theme).shape.borderRadius, - borderColor: gray[700], + borderColor: (theme.vars || theme).palette.divider, backgroundColor: (theme.vars || theme).palette.background.paper, - boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + boxShadow: 'inset 0 1px 0 hsla(0, 0%, 100%, 0.05)', '&:hover': { - borderColor: alpha(gray[700], 0.7), + borderColor: 'hsla(0, 0%, 100%, 0.15)', backgroundColor: (theme.vars || theme).palette.background.paper, boxShadow: 'none', }, [`&.${selectClasses.focused}`]: { outlineOffset: 0, - borderColor: gray[900], + borderColor: 'hsl(210, 55%, 55%)', }, '&:before, &:after': { display: 'none', @@ -108,7 +107,7 @@ export const navigationCustomizations: Components = { display: 'flex', alignItems: 'center', '&:focus-visible': { - backgroundColor: gray[900], + backgroundColor: (theme.vars || theme).palette.background.default, }, }), }), @@ -151,6 +150,7 @@ export const navigationCustomizations: Components = { styleOverrides: { paper: ({ theme }) => ({ backgroundColor: (theme.vars || theme).palette.background.default, + borderRight: `1px solid ${(theme.vars || theme).palette.divider}`, }), }, }, @@ -204,8 +204,8 @@ export const navigationCustomizations: Components = { ...theme.applyStyles('dark', { ':hover': { color: (theme.vars || theme).palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], + backgroundColor: alpha((theme.vars || theme).palette.common.white, 0.08), + borderColor: (theme.vars || theme).palette.divider, }, [`&.${tabClasses.selected}`]: { color: '#fff', diff --git a/src/shared-theme/customizations/surfaces.ts b/src/shared-theme/customizations/surfaces.ts index f47a6d8..7a2f318 100644 --- a/src/shared-theme/customizations/surfaces.ts +++ b/src/shared-theme/customizations/surfaces.ts @@ -40,7 +40,7 @@ export const surfacesCustomizations: Components = { '&:hover': { backgroundColor: gray[50] }, '&:focus-visible': { backgroundColor: 'transparent' }, ...theme.applyStyles('dark', { - '&:hover': { backgroundColor: gray[800] }, + '&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.06) }, }), }), }, @@ -67,7 +67,7 @@ export const surfacesCustomizations: Components = { border: `1px solid ${(theme.vars || theme).palette.divider}`, boxShadow: 'none', ...theme.applyStyles('dark', { - backgroundColor: gray[800], + backgroundColor: (theme.vars || theme).palette.background.paper, }), variants: [ { @@ -79,7 +79,7 @@ export const surfacesCustomizations: Components = { boxShadow: 'none', background: 'hsl(0, 0%, 100%)', ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), + background: alpha((theme.vars || theme).palette.background.paper, 0.6), }), }, }, diff --git a/src/shared-theme/themeConfig.ts b/src/shared-theme/themeConfig.ts new file mode 100644 index 0000000..9b82f95 --- /dev/null +++ b/src/shared-theme/themeConfig.ts @@ -0,0 +1,72 @@ +import { gray } from "./themePrimitives"; +import { alpha } from "@mui/material/styles"; + +declare module "@mui/material/styles" { + interface Theme { + semantic: SemanticColors; + } + interface ThemeOptions { + semantic?: SemanticColors; + } +} + +export type SemanticColorMode = "light" | "dark"; + +export interface SemanticColors { + surface: { + page: string; + card: string; + elevated: string; + }; + border: { + default: string; + subtle: string; + }; + text: { + primary: string; + secondary: string; + muted: string; + }; +} + +const darkBg = 'hsl(0, 0%, 9%)'; +const darkPaper = 'hsl(0, 0%, 14%)'; +const darkElevated = 'hsl(0, 0%, 19%)'; + +export function getSemanticColors(mode: SemanticColorMode): SemanticColors { + if (mode === "dark") { + return { + surface: { + page: darkBg, + card: darkPaper, + elevated: darkElevated, + }, + border: { + default: 'hsla(0, 0%, 100%, 0.08)', + subtle: 'hsla(0, 0%, 100%, 0.04)', + }, + text: { + primary: 'hsl(0, 0%, 92%)', + secondary: 'hsl(0, 0%, 60%)', + muted: 'hsl(0, 0%, 45%)', + }, + }; + } + + return { + surface: { + page: "hsl(0, 0%, 99%)", + card: "hsl(220, 35%, 97%)", + elevated: gray[100], + }, + border: { + default: alpha(gray[300], 0.4), + subtle: alpha(gray[200], 0.3), + }, + text: { + primary: gray[800], + secondary: gray[600], + muted: gray[500], + }, + }; +} diff --git a/src/shared-theme/themePrimitives.ts b/src/shared-theme/themePrimitives.ts index 97b2c3d..1e157f6 100644 --- a/src/shared-theme/themePrimitives.ts +++ b/src/shared-theme/themePrimitives.ts @@ -23,6 +23,10 @@ declare module '@mui/material/styles' { interface Palette { baseShadow: string; + flows: { + outflows: { primary: string; surface: string; text: string }; + inflows: { primary: string; surface: string; text: string }; + }; } } @@ -52,7 +56,9 @@ export const gray = { 500: 'hsl(220, 20%, 42%)', 600: 'hsl(220, 20%, 35%)', 700: 'hsl(220, 20%, 25%)', + 750: 'hsl(220, 20%, 18%)', 800: 'hsl(220, 30%, 6%)', + 850: 'hsl(220, 22%, 11%)', 900: 'hsl(220, 35%, 3%)', }; @@ -95,10 +101,14 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; +const darkBg = 'hsl(0, 0%, 9%)'; +const darkPaper = 'hsl(0, 0%, 14%)'; +const darkElevated = 'hsl(0, 0%, 19%)'; + export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + ? '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)' : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { @@ -111,9 +121,9 @@ export const getDesignTokens = (mode: PaletteMode) => { contrastText: brand[50], ...(mode === 'dark' && { contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], + light: 'hsl(210, 50%, 65%)', + main: 'hsl(210, 55%, 55%)', + dark: 'hsl(210, 50%, 35%)', }), }, info: { @@ -122,10 +132,10 @@ export const getDesignTokens = (mode: PaletteMode) => { dark: brand[600], contrastText: gray[50], ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], + contrastText: 'hsl(210, 30%, 80%)', + light: 'hsl(210, 40%, 50%)', + main: 'hsl(210, 35%, 40%)', + dark: 'hsl(210, 30%, 25%)', }), }, warning: { @@ -133,9 +143,9 @@ export const getDesignTokens = (mode: PaletteMode) => { main: orange[400], dark: orange[800], ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], + light: 'hsl(45, 60%, 55%)', + main: 'hsl(45, 55%, 45%)', + dark: 'hsl(45, 50%, 30%)', }), }, error: { @@ -143,9 +153,9 @@ export const getDesignTokens = (mode: PaletteMode) => { main: red[400], dark: red[800], ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], + light: 'hsl(0, 55%, 60%)', + main: 'hsl(0, 55%, 50%)', + dark: 'hsl(0, 50%, 35%)', }), }, success: { @@ -153,34 +163,46 @@ export const getDesignTokens = (mode: PaletteMode) => { main: green[400], dark: green[800], ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], + light: 'hsl(120, 40%, 55%)', + main: 'hsl(120, 40%, 45%)', + dark: 'hsl(120, 35%, 30%)', }), }, grey: { ...gray, }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + divider: mode === 'dark' ? 'hsla(0, 0%, 100%, 0.08)' : alpha(gray[300], 0.4), background: { default: 'hsl(0, 0%, 99%)', paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + ...(mode === 'dark' && { default: darkBg, paper: darkPaper }), }, text: { primary: gray[800], secondary: gray[600], warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 92%)', secondary: 'hsl(0, 0%, 60%)' }), }, action: { hover: alpha(gray[200], 0.2), selected: `${alpha(gray[200], 0.3)}`, ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), + hover: 'hsla(0, 0%, 100%, 0.06)', + selected: 'hsla(0, 0%, 100%, 0.1)', }), }, + flows: { + outflows: { + primary: mode === 'dark' ? 'hsl(0, 55%, 60%)' : '#d32f2f', + surface: mode === 'dark' ? 'hsla(0, 35%, 25%, 0.6)' : '#fdecea', + text: mode === 'dark' ? 'hsl(0, 60%, 80%)' : '#b71c1c', + }, + inflows: { + primary: mode === 'dark' ? 'hsl(120, 40%, 55%)' : '#2e7d32', + surface: mode === 'dark' ? 'hsla(120, 25%, 22%, 0.6)' : '#e8f5e9', + text: mode === 'dark' ? 'hsl(120, 40%, 78%)' : '#1b5e20', + }, + }, }, typography: { fontFamily: 'Inter, sans-serif', @@ -285,6 +307,18 @@ export const colorSchemes = { hover: alpha(gray[200], 0.2), selected: `${alpha(gray[200], 0.3)}`, }, + flows: { + outflows: { + primary: '#d32f2f', + surface: '#fdecea', + text: '#b71c1c', + }, + inflows: { + primary: '#2e7d32', + surface: '#e8f5e9', + text: '#1b5e20', + }, + }, baseShadow: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', }, @@ -293,49 +327,60 @@ export const colorSchemes = { palette: { primary: { contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], + light: 'hsl(210, 50%, 65%)', + main: 'hsl(210, 55%, 55%)', + dark: 'hsl(210, 50%, 35%)', }, info: { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], + contrastText: 'hsl(210, 30%, 80%)', + light: 'hsl(210, 40%, 50%)', + main: 'hsl(210, 35%, 40%)', + dark: 'hsl(210, 30%, 25%)', }, warning: { - light: orange[400], - main: orange[500], - dark: orange[700], + light: 'hsl(45, 60%, 55%)', + main: 'hsl(45, 55%, 45%)', + dark: 'hsl(45, 50%, 30%)', }, error: { - light: red[400], - main: red[500], - dark: red[700], + light: 'hsl(0, 55%, 60%)', + main: 'hsl(0, 55%, 50%)', + dark: 'hsl(0, 50%, 35%)', }, success: { - light: green[400], - main: green[500], - dark: green[700], + light: 'hsl(120, 40%, 55%)', + main: 'hsl(120, 40%, 45%)', + dark: 'hsl(120, 35%, 30%)', }, grey: { ...gray, }, - divider: alpha(gray[700], 0.6), + divider: 'hsla(0, 0%, 100%, 0.08)', background: { - default: gray[900], - paper: 'hsl(220, 30%, 7%)', + default: darkBg, + paper: darkPaper, }, text: { - primary: 'hsl(0, 0%, 100%)', - secondary: gray[400], + primary: 'hsl(0, 0%, 92%)', + secondary: 'hsl(0, 0%, 60%)', }, action: { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), + hover: 'hsla(0, 0%, 100%, 0.06)', + selected: 'hsla(0, 0%, 100%, 0.1)', }, - baseShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + flows: { + outflows: { + primary: 'hsl(0, 55%, 60%)', + surface: 'hsla(0, 35%, 25%, 0.6)', + text: 'hsl(0, 60%, 80%)', + }, + inflows: { + primary: 'hsl(120, 40%, 55%)', + surface: 'hsla(120, 25%, 22%, 0.6)', + text: 'hsl(120, 40%, 78%)', + }, + }, + baseShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)', }, }, };