From 20a42f3c554ac53e72754365efeb4960ad2569f1 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Tue, 4 Nov 2025 19:20:17 +0100 Subject: [PATCH] Add custom theme --- matrixgw_frontend/src/App.tsx | 2 +- matrixgw_frontend/src/main.tsx | 37 +- matrixgw_frontend/src/theme/AppTheme.tsx | 46 ++ matrixgw_frontend/src/theme/README.md | 2 + .../src/theme/customizations/dataDisplay.tsx | 233 +++++++++ .../src/theme/customizations/feedback.tsx | 46 ++ .../src/theme/customizations/inputs.tsx | 452 ++++++++++++++++++ .../src/theme/customizations/navigation.tsx | 284 +++++++++++ .../src/theme/customizations/surfaces.ts | 113 +++++ .../src/theme/themePrimitives.ts | 414 ++++++++++++++++ matrixgw_frontend/src/widgets/AsyncWidget.tsx | 8 - 11 files changed, 1612 insertions(+), 25 deletions(-) create mode 100644 matrixgw_frontend/src/theme/AppTheme.tsx create mode 100644 matrixgw_frontend/src/theme/README.md create mode 100644 matrixgw_frontend/src/theme/customizations/dataDisplay.tsx create mode 100644 matrixgw_frontend/src/theme/customizations/feedback.tsx create mode 100644 matrixgw_frontend/src/theme/customizations/inputs.tsx create mode 100644 matrixgw_frontend/src/theme/customizations/navigation.tsx create mode 100644 matrixgw_frontend/src/theme/customizations/surfaces.ts create mode 100644 matrixgw_frontend/src/theme/themePrimitives.ts diff --git a/matrixgw_frontend/src/App.tsx b/matrixgw_frontend/src/App.tsx index c664eaa..20351d8 100644 --- a/matrixgw_frontend/src/App.tsx +++ b/matrixgw_frontend/src/App.tsx @@ -1,3 +1,3 @@ export function App(): React.ReactElement { - return <>hello; + return <>hello world; } diff --git a/matrixgw_frontend/src/main.tsx b/matrixgw_frontend/src/main.tsx index cc8c1bb..afd73ad 100644 --- a/matrixgw_frontend/src/main.tsx +++ b/matrixgw_frontend/src/main.tsx @@ -13,24 +13,29 @@ import { SnackbarProvider } from "./hooks/contexts_provider/SnackbarProvider"; import { LoadingMessageProvider } from "./hooks/contexts_provider/LoadingMessageProvider"; import { AsyncWidget } from "./widgets/AsyncWidget"; import { ServerApi } from "./api/ServerApi"; +import { AppTheme } from "./theme/AppTheme"; +import { CssBaseline } from "@mui/material"; createRoot(document.getElementById("root")!).render( - - - - - { - await ServerApi.LoadConfig(); - }} - errMsg="Failed to load static server configuration!" - build={() => } - /> - - - - + + + + + + + { + await ServerApi.LoadConfig(); + }} + errMsg="Failed to load static server configuration!" + build={() => } + /> + + + + + ); diff --git a/matrixgw_frontend/src/theme/AppTheme.tsx b/matrixgw_frontend/src/theme/AppTheme.tsx new file mode 100644 index 0000000..2c432a5 --- /dev/null +++ b/matrixgw_frontend/src/theme/AppTheme.tsx @@ -0,0 +1,46 @@ +import * as React from "react"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import type { ThemeOptions } from "@mui/material/styles"; +import { inputsCustomizations } from "./customizations/inputs"; +import { dataDisplayCustomizations } from "./customizations/dataDisplay"; +import { feedbackCustomizations } from "./customizations/feedback"; +import { navigationCustomizations } from "./customizations/navigation"; +import { surfacesCustomizations } from "./customizations/surfaces"; +import { colorSchemes, typography, shadows, shape } from "./themePrimitives"; + +interface AppThemeProps { + themeComponents?: ThemeOptions["components"]; +} + +export function AppTheme( + props: React.PropsWithChildren +): React.ReactElement { + const { children, themeComponents } = props; + const theme = React.useMemo(() => { + return createTheme({ + // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/ + cssVariables: { + colorSchemeSelector: "data-mui-color-scheme", + cssVarPrefix: "template", + }, + colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes + typography, + shadows, + shape, + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + ...themeComponents, + }, + }); + }, [themeComponents]); + + return ( + + {children} + + ); +} diff --git a/matrixgw_frontend/src/theme/README.md b/matrixgw_frontend/src/theme/README.md new file mode 100644 index 0000000..e603e6a --- /dev/null +++ b/matrixgw_frontend/src/theme/README.md @@ -0,0 +1,2 @@ +# Application Theme +Taken from https://github.com/mui/material-ui/tree/v7.3.4/docs/data/material/getting-started/templates/shared-theme \ No newline at end of file diff --git a/matrixgw_frontend/src/theme/customizations/dataDisplay.tsx b/matrixgw_frontend/src/theme/customizations/dataDisplay.tsx new file mode 100644 index 0000000..c23166a --- /dev/null +++ b/matrixgw_frontend/src/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { buttonBaseClasses } from "@mui/material/ButtonBase"; +import { chipClasses } from "@mui/material/Chip"; +import { iconButtonClasses } from "@mui/material/IconButton"; +import { alpha, type Components, type Theme } from "@mui/material/styles"; +import { svgIconClasses } from "@mui/material/SvgIcon"; +import { typographyClasses } from "@mui/material/Typography"; +import { gray, green, red } from "../themePrimitives"; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: "8px", + display: "flex", + flexDirection: "column", + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: "1rem", + height: "1rem", + color: (theme.vars || theme).palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: "flex", + gap: 8, + padding: "2px 8px", + borderRadius: (theme.vars || theme).shape.borderRadius, + opacity: 0.7, + "&.Mui-selected": { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: (theme.vars || theme).palette.text.primary, + }, + "&:focus-visible": { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + "&:hover": { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + "&:focus-visible": { + backgroundColor: "transparent", + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: "transparent", + padding: "4px 8px", + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: "small", + }, + styleOverrides: { + root: ({ theme }) => ({ + border: "1px solid", + borderRadius: "999px", + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: "default", + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles("dark", { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: "success", + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles("dark", { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: "error", + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles("dark", { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: "small" }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: "medium" }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: "flex", + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: "small", + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: "small", + }, + style: { + fontSize: "1rem", + }, + }, + ], + }, + }, + }, +}; diff --git a/matrixgw_frontend/src/theme/customizations/feedback.tsx b/matrixgw_frontend/src/theme/customizations/feedback.tsx new file mode 100644 index 0000000..b8dc04b --- /dev/null +++ b/matrixgw_frontend/src/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { type Theme, alpha, type Components } from "@mui/material/styles"; +import { gray, orange } from "../themePrimitives"; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: (theme.vars || theme).palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + "& .MuiAlert-icon": { + color: orange[500], + }, + ...theme.applyStyles("dark", { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + "& .MuiDialog-paper": { + borderRadius: "10px", + border: "1px solid", + borderColor: (theme.vars || theme).palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles("dark", { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/matrixgw_frontend/src/theme/customizations/inputs.tsx b/matrixgw_frontend/src/theme/customizations/inputs.tsx new file mode 100644 index 0000000..d30fcf2 --- /dev/null +++ b/matrixgw_frontend/src/theme/customizations/inputs.tsx @@ -0,0 +1,452 @@ +import { alpha, type Theme, type Components } from "@mui/material/styles"; +import { outlinedInputClasses } from "@mui/material/OutlinedInput"; +import { svgIconClasses } from "@mui/material/SvgIcon"; +import { toggleButtonGroupClasses } from "@mui/material/ToggleButtonGroup"; +import { toggleButtonClasses } from "@mui/material/ToggleButton"; +import CheckBoxOutlineBlankRoundedIcon from "@mui/icons-material/CheckBoxOutlineBlankRounded"; +import CheckRoundedIcon from "@mui/icons-material/CheckRounded"; +import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded"; +import { gray, brand } from "../themePrimitives"; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: "border-box", + transition: "all 100ms ease-in", + "&:focus-visible": { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: "2px", + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: "none", + borderRadius: (theme.vars || theme).shape.borderRadius, + textTransform: "none", + variants: [ + { + props: { + size: "small", + }, + style: { + height: "2.25rem", + padding: "8px 12px", + }, + }, + { + props: { + size: "medium", + }, + style: { + height: "2.5rem", // 40px + }, + }, + { + props: { + color: "primary", + variant: "contained", + }, + style: { + color: "white", + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + "&:hover": { + backgroundImage: "none", + backgroundColor: gray[700], + boxShadow: "none", + }, + "&:active": { + backgroundColor: gray[800], + }, + ...theme.applyStyles("dark", { + color: "black", + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: "inset 0 -1px 0 hsl(220, 30%, 80%)", + border: `1px solid ${gray[50]}`, + "&:hover": { + backgroundImage: "none", + backgroundColor: gray[300], + boxShadow: "none", + }, + "&:active": { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: "secondary", + variant: "contained", + }, + style: { + color: "white", + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha( + brand[400], + 0.8 + )}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha( + brand[200], + 0.2 + )}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + "&:hover": { + backgroundColor: brand[700], + boxShadow: "none", + }, + "&:active": { + backgroundColor: brand[700], + backgroundImage: "none", + }, + }, + }, + { + props: { + variant: "outlined", + }, + style: { + color: (theme.vars || theme).palette.text.primary, + border: "1px solid", + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + "&:hover": { + backgroundColor: gray[100], + borderColor: gray[300], + }, + "&:active": { + backgroundColor: gray[200], + }, + ...theme.applyStyles("dark", { + backgroundColor: gray[800], + borderColor: gray[700], + + "&:hover": { + backgroundColor: gray[900], + borderColor: gray[600], + }, + "&:active": { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: "secondary", + variant: "outlined", + }, + style: { + color: brand[700], + border: "1px solid", + borderColor: brand[200], + backgroundColor: brand[50], + "&:hover": { + backgroundColor: brand[100], + borderColor: brand[400], + }, + "&:active": { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles("dark", { + color: brand[50], + border: "1px solid", + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + "&:hover": { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + "&:active": { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: "text", + }, + style: { + color: gray[600], + "&:hover": { + backgroundColor: gray[100], + }, + "&:active": { + backgroundColor: gray[200], + }, + ...theme.applyStyles("dark", { + color: gray[50], + "&:hover": { + backgroundColor: gray[700], + }, + "&:active": { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: "secondary", + variant: "text", + }, + style: { + color: brand[700], + "&:hover": { + backgroundColor: alpha(brand[100], 0.5), + }, + "&:active": { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles("dark", { + color: brand[100], + "&:hover": { + backgroundColor: alpha(brand[900], 0.5), + }, + "&:active": { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: "none", + borderRadius: (theme.vars || theme).shape.borderRadius, + textTransform: "none", + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: (theme.vars || theme).palette.text.primary, + border: "1px solid ", + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + "&:hover": { + backgroundColor: gray[100], + borderColor: gray[300], + }, + "&:active": { + backgroundColor: gray[200], + }, + ...theme.applyStyles("dark", { + backgroundColor: gray[800], + borderColor: gray[700], + "&:hover": { + backgroundColor: gray[900], + borderColor: gray[600], + }, + "&:active": { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: "small", + }, + style: { + width: "2.25rem", + height: "2.25rem", + padding: "0.25rem", + [`& .${svgIconClasses.root}`]: { fontSize: "1rem" }, + }, + }, + { + props: { + size: "medium", + }, + style: { + width: "2.5rem", + height: "2.5rem", + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: "10px", + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles("dark", { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: "#fff", + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: "12px 16px", + textTransform: "none", + borderRadius: "10px", + fontWeight: 500, + ...theme.applyStyles("dark", { + color: gray[400], + boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)", + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: "1px solid ", + borderColor: alpha(gray[300], 0.8), + boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset", + backgroundColor: alpha(gray[100], 0.4), + transition: "border-color, background-color, 120ms ease-in", + "&:hover": { + borderColor: brand[300], + }, + "&.Mui-focusVisible": { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: "2px", + borderColor: brand[400], + }, + "&.Mui-checked": { + color: "white", + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + "&:hover": { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles("dark", { + borderColor: alpha(gray[700], 0.8), + boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset", + backgroundColor: alpha(gray[900], 0.8), + "&:hover": { + borderColor: brand[300], + }, + "&.Mui-focusVisible": { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: "2px", + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: "none", + }, + input: { + "&::placeholder": { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: "8px 12px", + color: (theme.vars || theme).palette.text.primary, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + backgroundColor: (theme.vars || theme).palette.background.default, + transition: "border 120ms ease-in", + "&:hover": { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles("dark", { + "&:hover": { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: "small", + }, + style: { + height: "2.25rem", + }, + }, + { + props: { + size: "medium", + }, + style: { + height: "2.5rem", + }, + }, + ], + }), + notchedOutline: { + border: "none", + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: (theme.vars || theme).palette.grey[500], + ...theme.applyStyles("dark", { + color: (theme.vars || theme).palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/matrixgw_frontend/src/theme/customizations/navigation.tsx b/matrixgw_frontend/src/theme/customizations/navigation.tsx new file mode 100644 index 0000000..2b1a584 --- /dev/null +++ b/matrixgw_frontend/src/theme/customizations/navigation.tsx @@ -0,0 +1,284 @@ +import * as React from "react"; +import { type Theme, alpha, type Components } from "@mui/material/styles"; +import { type SvgIconProps } from "@mui/material/SvgIcon"; +import { buttonBaseClasses } from "@mui/material/ButtonBase"; +import { dividerClasses } from "@mui/material/Divider"; +import { menuItemClasses } from "@mui/material/MenuItem"; +import { selectClasses } from "@mui/material/Select"; +import { tabClasses } from "@mui/material/Tab"; +import UnfoldMoreRoundedIcon from "@mui/icons-material/UnfoldMoreRounded"; +import { gray, brand } from "../themePrimitives"; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations: Components = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: (theme.vars || theme).shape.borderRadius, + padding: "6px 8px", + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: "transparent", + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: "0px", + [`&.${dividerClasses.root}`]: { + margin: "0 -8px", + }, + }, + paper: ({ theme }) => ({ + marginTop: "4px", + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + backgroundImage: "none", + background: "hsl(0, 0%, 100%)", + boxShadow: + "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", + [`& .${buttonBaseClasses.root}`]: { + "&.Mui-selected": { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...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", + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef( + (props, ref) => ( + + ) + ), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: (theme.vars || theme).shape.borderRadius, + border: "1px solid", + borderColor: gray[200], + backgroundColor: (theme.vars || theme).palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + "&:hover": { + borderColor: gray[300], + backgroundColor: (theme.vars || theme).palette.background.paper, + boxShadow: "none", + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + "&:before, &:after": { + display: "none", + }, + + ...theme.applyStyles("dark", { + borderRadius: (theme.vars || theme).shape.borderRadius, + borderColor: gray[700], + 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)`, + "&:hover": { + borderColor: alpha(gray[700], 0.7), + backgroundColor: (theme.vars || theme).palette.background.paper, + boxShadow: "none", + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + "&:before, &:after": { + display: "none", + }, + }), + }), + select: ({ theme }) => ({ + display: "flex", + alignItems: "center", + ...theme.applyStyles("dark", { + display: "flex", + alignItems: "center", + "&:focus-visible": { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: "none", + }, + styleOverrides: { + root: ({ theme }) => ({ + color: (theme.vars || theme).palette.text.primary, + fontWeight: 500, + position: "relative", + textDecoration: "none", + width: "fit-content", + "&::before": { + content: '""', + position: "absolute", + width: "100%", + height: "1px", + bottom: 0, + left: 0, + backgroundColor: (theme.vars || theme).palette.text.secondary, + opacity: 0.3, + transition: "width 0.3s ease, opacity 0.3s ease", + }, + "&:hover::before": { + width: 0, + }, + "&:focus-visible": { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: "4px", + borderRadius: "2px", + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: (theme.vars || theme).palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + "&.Mui-selected": { + color: "white", + backgroundColor: (theme.vars || theme).palette.grey[900], + }, + ...theme.applyStyles("dark", { + "&.Mui-selected": { + color: "black", + backgroundColor: (theme.vars || theme).palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: "fit-content" }, + indicator: ({ theme }) => ({ + backgroundColor: (theme.vars || theme).palette.grey[800], + ...theme.applyStyles("dark", { + backgroundColor: (theme.vars || theme).palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: "6px 8px", + marginBottom: "8px", + textTransform: "none", + minWidth: "fit-content", + minHeight: "fit-content", + color: (theme.vars || theme).palette.text.secondary, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: "1px solid", + borderColor: "transparent", + ":hover": { + color: (theme.vars || theme).palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles("dark", { + ":hover": { + color: (theme.vars || theme).palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: "#fff", + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: "1px solid", + borderColor: (theme.vars || theme).palette.divider, + flex: 1, + borderRadius: "99px", + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: "transparent", + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: "50%", + "& text": { + display: "none", + }, + "&.Mui-active": { + border: "none", + color: (theme.vars || theme).palette.primary.main, + }, + "&.Mui-completed": { + border: "none", + color: (theme.vars || theme).palette.success.main, + }, + ...theme.applyStyles("dark", { + border: `1px solid ${gray[700]}`, + "&.Mui-active": { + border: "none", + color: (theme.vars || theme).palette.primary.light, + }, + "&.Mui-completed": { + border: "none", + color: (theme.vars || theme).palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + "&.Mui-completed": { + opacity: 0.6, + ...theme.applyStyles("dark", { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/matrixgw_frontend/src/theme/customizations/surfaces.ts b/matrixgw_frontend/src/theme/customizations/surfaces.ts new file mode 100644 index 0000000..38bf7ed --- /dev/null +++ b/matrixgw_frontend/src/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, type Theme, type Components } from "@mui/material/styles"; +import { gray } from "../themePrimitives"; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: "clip", + backgroundColor: (theme.vars || theme).palette.background.default, + border: "1px solid", + borderColor: (theme.vars || theme).palette.divider, + ":before": { + backgroundColor: "transparent", + }, + "&:not(:last-of-type)": { + borderBottom: "none", + }, + "&:first-of-type": { + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, + }, + "&:last-of-type": { + borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, + borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: "none", + borderRadius: 8, + "&:hover": { backgroundColor: gray[50] }, + "&:focus-visible": { backgroundColor: "transparent" }, + ...theme.applyStyles("dark", { + "&:hover": { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: "none" }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: "all 100ms ease", + backgroundColor: gray[50], + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + boxShadow: "none", + ...theme.applyStyles("dark", { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: "outlined", + }, + style: { + border: `1px solid ${(theme.vars || theme).palette.divider}`, + boxShadow: "none", + background: "hsl(0, 0%, 100%)", + ...theme.applyStyles("dark", { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + "&:last-child": { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/matrixgw_frontend/src/theme/themePrimitives.ts b/matrixgw_frontend/src/theme/themePrimitives.ts new file mode 100644 index 0000000..1e95864 --- /dev/null +++ b/matrixgw_frontend/src/theme/themePrimitives.ts @@ -0,0 +1,414 @@ +import { + createTheme, + alpha, + type PaletteMode, + type Shadows, +} from "@mui/material/styles"; + +declare module "@mui/material/Paper" { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module "@mui/material/styles" { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} + + interface Palette { + baseShadow: string; + } +} + +const defaultTheme = createTheme(); + +const customShadows: Shadows = [...defaultTheme.shadows]; + +export const brand = { + 50: "hsl(210, 100%, 95%)", + 100: "hsl(210, 100%, 92%)", + 200: "hsl(210, 100%, 80%)", + 300: "hsl(210, 100%, 65%)", + 400: "hsl(210, 98%, 48%)", + 500: "hsl(210, 98%, 42%)", + 600: "hsl(210, 98%, 55%)", + 700: "hsl(210, 100%, 35%)", + 800: "hsl(210, 100%, 16%)", + 900: "hsl(210, 100%, 21%)", +}; + +export const gray = { + 50: "hsl(220, 35%, 97%)", + 100: "hsl(220, 30%, 94%)", + 200: "hsl(220, 20%, 88%)", + 300: "hsl(220, 20%, 80%)", + 400: "hsl(220, 20%, 65%)", + 500: "hsl(220, 20%, 42%)", + 600: "hsl(220, 20%, 35%)", + 700: "hsl(220, 20%, 25%)", + 800: "hsl(220, 30%, 6%)", + 900: "hsl(220, 35%, 3%)", +}; + +export const green = { + 50: "hsl(120, 80%, 98%)", + 100: "hsl(120, 75%, 94%)", + 200: "hsl(120, 75%, 87%)", + 300: "hsl(120, 61%, 77%)", + 400: "hsl(120, 44%, 53%)", + 500: "hsl(120, 59%, 30%)", + 600: "hsl(120, 70%, 25%)", + 700: "hsl(120, 75%, 16%)", + 800: "hsl(120, 84%, 10%)", + 900: "hsl(120, 87%, 6%)", +}; + +export const orange = { + 50: "hsl(45, 100%, 97%)", + 100: "hsl(45, 92%, 90%)", + 200: "hsl(45, 94%, 80%)", + 300: "hsl(45, 90%, 65%)", + 400: "hsl(45, 90%, 40%)", + 500: "hsl(45, 90%, 35%)", + 600: "hsl(45, 91%, 25%)", + 700: "hsl(45, 94%, 20%)", + 800: "hsl(45, 95%, 16%)", + 900: "hsl(45, 93%, 12%)", +}; + +export const red = { + 50: "hsl(0, 100%, 97%)", + 100: "hsl(0, 92%, 90%)", + 200: "hsl(0, 94%, 80%)", + 300: "hsl(0, 90%, 65%)", + 400: "hsl(0, 90%, 40%)", + 500: "hsl(0, 90%, 30%)", + 600: "hsl(0, 91%, 25%)", + 700: "hsl(0, 94%, 18%)", + 800: "hsl(0, 95%, 12%)", + 900: "hsl(0, 93%, 6%)", +}; + +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" + : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px"; + + return { + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === "dark" && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === "dark" && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === "dark" && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === "dark" && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === "dark" && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === "dark" ? alpha(gray[700], 0.6) : 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%)", + }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === "dark" && { + primary: "hsl(0, 0%, 100%)", + secondary: gray[400], + }), + }, + 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), + }), + }, + }, + typography: { + fontFamily: "Inter, sans-serif", + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; + +export const colorSchemes = { + light: { + palette: { + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + }, + grey: { + ...gray, + }, + divider: alpha(gray[300], 0.4), + background: { + default: "hsl(0, 0%, 99%)", + paper: "hsl(220, 35%, 97%)", + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + }, + baseShadow: + "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", + }, + }, + dark: { + palette: { + primary: { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }, + info: { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }, + warning: { + light: orange[400], + main: orange[500], + dark: orange[700], + }, + error: { + light: red[400], + main: red[500], + dark: red[700], + }, + success: { + light: green[400], + main: green[500], + dark: green[700], + }, + grey: { + ...gray, + }, + divider: alpha(gray[700], 0.6), + background: { + default: gray[900], + paper: "hsl(220, 30%, 7%)", + }, + text: { + primary: "hsl(0, 0%, 100%)", + secondary: gray[400], + }, + action: { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }, + baseShadow: + "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px", + }, + }, +}; + +export const typography = { + fontFamily: "Inter, sans-serif", + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, +}; + +export const shape = { + borderRadius: 8, +}; + +// @ts-ignore +const defaultShadows: Shadows = [ + "none", + "var(--template-palette-baseShadow)", + ...defaultTheme.shadows.slice(2), +]; +export const shadows = defaultShadows; diff --git a/matrixgw_frontend/src/widgets/AsyncWidget.tsx b/matrixgw_frontend/src/widgets/AsyncWidget.tsx index d642a7f..bc7e036 100644 --- a/matrixgw_frontend/src/widgets/AsyncWidget.tsx +++ b/matrixgw_frontend/src/widgets/AsyncWidget.tsx @@ -50,10 +50,6 @@ export function AsyncWidget(p: { height: "100%", flex: "1", flexDirection: "column", - backgroundColor: (theme) => - theme.palette.mode === "light" - ? theme.palette.grey[100] - : theme.palette.grey[900], }} > - theme.palette.mode === "light" - ? theme.palette.grey[100] - : theme.palette.grey[900], }} >