From b41797e20cad6ca0c05aef8588152e51bf6a6e0c Mon Sep 17 00:00:00 2001 From: Jordan Trouw Date: Mon, 2 Dec 2024 10:24:33 -0800 Subject: [PATCH] adding themes and theme extenders --- .storybook/preview.tsx | 9 +- .../product-theme/ThemeExtensions/index.ts | 1 + .../ThemeExtensions/typography.ts | 56 +++++++ .../theme/src/product-theme/dataism/theme.tsx | 9 +- packages/theme/src/product-theme/index.ts | 3 +- .../theme/src/product-theme/xylabs/theme.tsx | 32 +--- .../{xyo-website => xyo}/darkThemeOptions.tsx | 0 .../{xyo-website => xyo}/index.ts | 0 .../lightThemeOptions.tsx | 0 .../{xyo-website => xyo}/theme.ts | 5 +- .../product-theme/xyos/darkThemeOptions.tsx | 84 ++++++++++ .../theme/src/product-theme/xyos/index.ts | 1 + .../product-theme/xyos/lightThemeOptions.tsx | 28 ++++ .../theme/src/product-theme/xyos/theme.ts | 151 ++++++++++++++++++ .../theme/TypographyShowcase.stories.tsx | 28 ++++ .../src/showcase/theme/TypographyShowcase.tsx | 112 +++++++++++++ .../theme/src/theme-fragments/components.tsx | 126 +++++++++++++++ packages/theme/src/theme-fragments/index.ts | 3 + packages/theme/src/theme-fragments/shape.tsx | 4 + .../theme/src/theme-fragments/spacing.tsx | 4 + 20 files changed, 620 insertions(+), 36 deletions(-) create mode 100644 packages/theme/src/product-theme/ThemeExtensions/typography.ts rename packages/theme/src/product-theme/{xyo-website => xyo}/darkThemeOptions.tsx (100%) rename packages/theme/src/product-theme/{xyo-website => xyo}/index.ts (100%) rename packages/theme/src/product-theme/{xyo-website => xyo}/lightThemeOptions.tsx (100%) rename packages/theme/src/product-theme/{xyo-website => xyo}/theme.ts (97%) create mode 100644 packages/theme/src/product-theme/xyos/darkThemeOptions.tsx create mode 100644 packages/theme/src/product-theme/xyos/index.ts create mode 100644 packages/theme/src/product-theme/xyos/lightThemeOptions.tsx create mode 100644 packages/theme/src/product-theme/xyos/theme.ts create mode 100644 packages/theme/src/showcase/theme/TypographyShowcase.stories.tsx create mode 100644 packages/theme/src/showcase/theme/TypographyShowcase.tsx create mode 100644 packages/theme/src/theme-fragments/components.tsx create mode 100644 packages/theme/src/theme-fragments/index.ts create mode 100644 packages/theme/src/theme-fragments/shape.tsx create mode 100644 packages/theme/src/theme-fragments/spacing.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d0291b37..9484899d 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -2,9 +2,9 @@ import { Box, CssBaseline, Theme, useTheme } from '@mui/material' import type { Decorator } from '@storybook/react' import { InvertibleMuiThemeProvider } from '@xylabs/react-invertible-theme' import React from 'react' -import { XyoTheme, DataismTheme, XyLabsTheme } from '@xylabs/react-theme' +import { XyoTheme, DataismTheme, XyLabsTheme, XyosTheme } from '@xylabs/react-theme' -const themeNames = ['None', 'XYO', 'Dataism', 'XYLabs'] as const +const themeNames = ['None', 'XYO', 'Dataism', 'XYLabs', 'xyOS'] as const type ThemeName = typeof themeNames[number] export const globalTypes = { @@ -28,8 +28,9 @@ const getTheme = (themeName: ThemeName) => { const themes: Record = { 'None': theme, 'XYO': XyoTheme(theme, false), - 'Dataism': DataismTheme(theme, false), - 'XYLabs': XyLabsTheme(theme, false), + 'xyOS': XyosTheme(theme), + 'Dataism': DataismTheme(theme), + 'XYLabs': XyLabsTheme(theme), } return themes[themeName] ?? {} } diff --git a/packages/theme/src/product-theme/ThemeExtensions/index.ts b/packages/theme/src/product-theme/ThemeExtensions/index.ts index 5f995e99..f7dff7f1 100644 --- a/packages/theme/src/product-theme/ThemeExtensions/index.ts +++ b/packages/theme/src/product-theme/ThemeExtensions/index.ts @@ -1 +1,2 @@ export * from './customThemeColors.ts' +export * from './typography.ts' diff --git a/packages/theme/src/product-theme/ThemeExtensions/typography.ts b/packages/theme/src/product-theme/ThemeExtensions/typography.ts new file mode 100644 index 00000000..d8490af0 --- /dev/null +++ b/packages/theme/src/product-theme/ThemeExtensions/typography.ts @@ -0,0 +1,56 @@ +import '@mui/material/styles' + +declare module '@mui/material/styles' { + interface Typography { + display1: React.CSSProperties + display2: React.CSSProperties + stylize1: React.CSSProperties + stylize2: React.CSSProperties + } + + interface TypographyOptions { + display1?: React.CSSProperties + display2?: React.CSSProperties + stylize1?: React.CSSProperties + stylize2?: React.CSSProperties + } +} + +export const display1 = { fontSize: '4rem' } + +export const display2 = { + fontSize: '3.5rem', + fontWeight: 400, +} + +export const stylize1 = { + fontSize: '1.25rem', + fontWeight: 300, + letterSpacing: '0.15em', +} + +export const stylize2 = { + fontSize: '1rem', + fontWeight: 700, + letterSpacing: '0.1em', +} + +export const typographyFragmentDisplay1 = { + fontSize: '4rem', + fontWeight: 400, +} + +export const typographyFragmentDisplay2 = { + fontSize: '4rem', + fontWeight: 400, +} + +export const typographyFragmentStylize1 = { + fontSize: '4rem', + fontWeight: 400, +} + +export const typographyFragmentStylize2 = { + fontSize: '4rem', + fontWeight: 400, +} diff --git a/packages/theme/src/product-theme/dataism/theme.tsx b/packages/theme/src/product-theme/dataism/theme.tsx index ddd7087b..f1089681 100644 --- a/packages/theme/src/product-theme/dataism/theme.tsx +++ b/packages/theme/src/product-theme/dataism/theme.tsx @@ -3,16 +3,17 @@ import { alpha, createTheme, lighten, } from '@mui/material' +import { shapeFragment } from '../../theme-fragments/shape.tsx' +import { spacingFragment } from '../../theme-fragments/spacing.tsx' import { darkThemePalette } from './darkThemePalette.tsx' import { lightThemePalette } from './lightThemePalette.tsx' -export const DataismTheme = (theme: Theme, rtl = false): Theme => createTheme({ +export const DataismTheme = (theme: Theme): Theme => createTheme({ colorSchemes: { dark: { palette: darkThemePalette }, light: { palette: lightThemePalette }, }, cssVariables: { colorSchemeSelector: 'class' }, - direction: rtl ? 'rtl' : 'ltr', breakpoints: { values: { lg: 1350, @@ -141,8 +142,8 @@ export const DataismTheme = (theme: Theme, rtl = false): Theme => createTheme({ }, MuiLink: { styleOverrides: { root: { textDecoration: 'none' } } }, }, - shape: { borderRadius: 8 }, - spacing: 12, + ...spacingFragment, + ...shapeFragment, typography: { body1: { fontSize: '1.1rem' }, button: { diff --git a/packages/theme/src/product-theme/index.ts b/packages/theme/src/product-theme/index.ts index 30094542..25ae59c7 100644 --- a/packages/theme/src/product-theme/index.ts +++ b/packages/theme/src/product-theme/index.ts @@ -1,4 +1,5 @@ export * from './dataism/index.ts' export * from './ThemeExtensions/index.ts' export * from './xylabs/index.ts' -export * from './xyo-website/index.ts' +export * from './xyo/index.ts' +export * from './xyos/index.ts' diff --git a/packages/theme/src/product-theme/xylabs/theme.tsx b/packages/theme/src/product-theme/xylabs/theme.tsx index 863e2a99..c48ffb81 100644 --- a/packages/theme/src/product-theme/xylabs/theme.tsx +++ b/packages/theme/src/product-theme/xylabs/theme.tsx @@ -1,38 +1,20 @@ import { createTheme, type Theme } from '@mui/material' +import { + componentFragment, shapeFragment, spacingFragment, +} from '../../theme-fragments/index.ts' import { darkThemeOptions } from './darkThemeOptions.tsx' import { lightThemeOptions } from './lightThemeOptions.tsx' -export const XyLabsTheme = (theme: Theme, rtl = false): Theme => createTheme({ +export const XyLabsTheme = (theme: Theme): Theme => createTheme({ colorSchemes: { light: lightThemeOptions, dark: darkThemeOptions, }, cssVariables: { colorSchemeSelector: 'class' }, - direction: rtl ? 'rtl' : 'ltr', - components: { - MuiAlert: { - styleOverrides: { - root: { - paddingBottom: 0.5, - paddingTop: 0.5, - }, - }, - }, - MuiButton: { - styleOverrides: { - outlined: { backgroundColor: 'inherit' }, - root: { overflow: 'hidden' }, - }, - }, - MuiLink: { - defaultProps: { underline: 'none' }, - styleOverrides: { root: { '&:hover': { filter: 'brightness(75%)' } } }, - }, - MuiStepper: { styleOverrides: { root: { padding: '0px' } } }, - }, - shape: { borderRadius: 4 }, - spacing: 12, + ...componentFragment, + ...spacingFragment, + ...shapeFragment, typography: { fontFamily: '"Outfit", sans-serif', body1: { fontSize: '1.1rem' }, diff --git a/packages/theme/src/product-theme/xyo-website/darkThemeOptions.tsx b/packages/theme/src/product-theme/xyo/darkThemeOptions.tsx similarity index 100% rename from packages/theme/src/product-theme/xyo-website/darkThemeOptions.tsx rename to packages/theme/src/product-theme/xyo/darkThemeOptions.tsx diff --git a/packages/theme/src/product-theme/xyo-website/index.ts b/packages/theme/src/product-theme/xyo/index.ts similarity index 100% rename from packages/theme/src/product-theme/xyo-website/index.ts rename to packages/theme/src/product-theme/xyo/index.ts diff --git a/packages/theme/src/product-theme/xyo-website/lightThemeOptions.tsx b/packages/theme/src/product-theme/xyo/lightThemeOptions.tsx similarity index 100% rename from packages/theme/src/product-theme/xyo-website/lightThemeOptions.tsx rename to packages/theme/src/product-theme/xyo/lightThemeOptions.tsx diff --git a/packages/theme/src/product-theme/xyo-website/theme.ts b/packages/theme/src/product-theme/xyo/theme.ts similarity index 97% rename from packages/theme/src/product-theme/xyo-website/theme.ts rename to packages/theme/src/product-theme/xyo/theme.ts index 16c76774..d5c17b6b 100644 --- a/packages/theme/src/product-theme/xyo-website/theme.ts +++ b/packages/theme/src/product-theme/xyo/theme.ts @@ -3,6 +3,7 @@ import { alpha, createTheme, darken, } from '@mui/material' +import { shapeFragment, spacingFragment } from '../../theme-fragments/index.ts' import { darkThemeOptions } from './darkThemeOptions.tsx' import { lightThemeOptions } from './lightThemeOptions.tsx' @@ -109,8 +110,8 @@ export const XyoTheme = (theme: Theme, rtl = false): Theme => createTheme({ }, }, }, - shape: { borderRadius: 8 }, - spacing: 12, + ...spacingFragment, + ...shapeFragment, typography: { fontFamily: '"Lexend Deca", sans-serif', body1: { fontSize: '1.1rem' }, diff --git a/packages/theme/src/product-theme/xyos/darkThemeOptions.tsx b/packages/theme/src/product-theme/xyos/darkThemeOptions.tsx new file mode 100644 index 00000000..d542f796 --- /dev/null +++ b/packages/theme/src/product-theme/xyos/darkThemeOptions.tsx @@ -0,0 +1,84 @@ +import { + alpha, lighten, type ThemeOptions, +} from '@mui/material' + +import { neutralButtonStylesContained, neutralButtonStylesOutlined } from '../ThemeExtensions/index.ts' + +export const darkThemeOptions: ThemeOptions = { + palette: { + background: { + default: '#020223', + paper: '#19193F', + }, + error: { main: '#f6594e' }, + success: { + main: '#7efc81', + contrastText: '#011e01', + }, + primary: { main: '#5658F3', light: '#7c72ff' }, + secondary: { + main: '#66caf7', + contrastText: '#020223', + }, + warning: { main: '#f7d866' }, + text: { + disabled: '#a5acdb', + primary: '#E3E4EB', + secondary: '#e3e4eba3', + }, + }, + typography: { + body1: { color: '#ffffffa3' }, + body2: { color: '#B3B3BD' }, + caption: { color: '#B3B3BD' }, + }, + components: { + MuiButton: { + defaultProps: { color: 'neutral' }, + variants: [ + { + props: { variant: 'contained', color: 'neutral' }, + style: neutralButtonStylesContained, + }, + { + props: { variant: 'outlined', color: 'neutral' }, + style: neutralButtonStylesOutlined, + }, + { + props: { variant: 'text' }, + style: { + '&:hover': { + textDecoration: 'underline 1.5px #66caf7', + textUnderlineOffset: '5px', + backgroundColor: 'transparent', + }, + }, + }, + ], + }, + MuiChip: { + styleOverrides: { + colorError: { backgroundColor: alpha('#f6594e', 0.2), color: lighten('#f6594e', 0.2) }, + colorInfo: { backgroundColor: alpha('#72b4f4', 0.2), color: lighten('#72b4f4', 0.2) }, + colorPrimary: { backgroundColor: alpha('#5658F3', 0.2), color: lighten('#5658F3', 0.2) }, + colorSecondary: { backgroundColor: alpha('#66caf7', 0.2), color: lighten('#66caf7', 0.2) }, + colorSuccess: { backgroundColor: alpha('#7efc81', 0.2), color: lighten('#7efc81', 0.2) }, + colorWarning: { backgroundColor: alpha('#f7d866', 0.2), color: lighten('#f7d866', 0.2) }, + }, + }, + MuiDialog: { + styleOverrides: { + root: { + '& .MuiDialog-paper': { + backgroundColor: '#16163D', + backgroundImage: 'none', + paddingLeft: 2, + paddingRight: 2, + border: `1px solid ${lighten('#16163D', 0.05)}`, + }, + }, + }, + }, + MuiTable: { styleOverrides: { root: { background: '#20205A' } } }, + }, +} diff --git a/packages/theme/src/product-theme/xyos/index.ts b/packages/theme/src/product-theme/xyos/index.ts new file mode 100644 index 00000000..a685f9b3 --- /dev/null +++ b/packages/theme/src/product-theme/xyos/index.ts @@ -0,0 +1 @@ +export * from './theme.ts' diff --git a/packages/theme/src/product-theme/xyos/lightThemeOptions.tsx b/packages/theme/src/product-theme/xyos/lightThemeOptions.tsx new file mode 100644 index 00000000..8b3f68f8 --- /dev/null +++ b/packages/theme/src/product-theme/xyos/lightThemeOptions.tsx @@ -0,0 +1,28 @@ +import type { ThemeOptions } from '@mui/material' + +export const lightThemeOptions: ThemeOptions = { + palette: { + background: { + default: '#F4F4F4', + paper: '#FFFFFF', + }, + error: { + dark: '#AA0E0E', + light: '#F15555', + main: '#D81111', + }, + primary: { main: '#463dc6', light: '#b2adfb' }, + secondary: { main: '#186ecc' }, + success: { + dark: '#347f21', + light: '#94dd80', + main: '#62bc50', + }, + text: { + disabled: '#49454D', + primary: '#0d0d47', + secondary: '#49454D', + }, + warning: { main: '#ffc805' }, + }, +} diff --git a/packages/theme/src/product-theme/xyos/theme.ts b/packages/theme/src/product-theme/xyos/theme.ts new file mode 100644 index 00000000..f5848209 --- /dev/null +++ b/packages/theme/src/product-theme/xyos/theme.ts @@ -0,0 +1,151 @@ +import type { Theme } from '@mui/material' +import { alpha, createTheme } from '@mui/material' + +import { shapeFragment, spacingFragment } from '../../theme-fragments/index.ts' +import { darkThemeOptions } from './darkThemeOptions.tsx' +import { lightThemeOptions } from './lightThemeOptions.tsx' + +export const XyosTheme = (theme: Theme): Theme => createTheme({ + colorSchemes: { + dark: darkThemeOptions, + light: lightThemeOptions, + }, + cssVariables: { colorSchemeSelector: 'class' }, + components: { + MuiAccordion: { + styleOverrides: { + root: { + '&.Mui-expanded': { '&$expanded': { margin: '4px 0' } }, + 'boxShadow': 'none', + }, + }, + }, + MuiAccordionSummary: { styleOverrides: { root: { boxShadow: 'none' } } }, + MuiAppBar: { + styleOverrides: { + root: ({ theme }) => ({ + WebkitBackdropFilter: 'blur(20px)', + backdropFilter: 'blur(20px)', + backgroundColor: alpha(theme.palette.background.paper, 0.2), + boxShadow: 'none', + color: '#16163D', + ...theme.applyStyles('dark', { color: '#CBC4CE' }), + }), + }, + }, + MuiCard: { + defaultProps: { elevation: 0 }, + styleOverrides: { + root: ({ theme }) => ({ + WebkitBackdropFilter: 'blur(20px)', + backdropFilter: 'blur(20px)', + backgroundColor: alpha(theme.palette.background.paper, 0.7), + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + }), + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + // This is to get rid of the extra padding at the end of Card Content that misaligns padding when there's only 1 item + '&:last-child': { paddingBottom: '16px' }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + content: { + display: 'flex', + flexDirection: 'column', + overflow: 'hidden', + }, + }, + }, + MuiChip: { + styleOverrides: { + root: { + borderRadius: 4, + fontWeight: 400, + }, + }, + }, + MuiContainer: { styleOverrides: { root: { maxWidth: 'xl' } } }, + MuiDrawer: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiTypography-root, & .MuiButton-root': { color: '#FFFFFF' }, + 'paperProps': { backgroundColor: '#19193F' }, + ...theme.applyStyles('dark', { color: theme.palette.secondary.main }), + }), + }, + }, + MuiFilledInput: { + defaultProps: { disableUnderline: true }, + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-error': { border: `${theme.palette.error.main} 1px solid` }, + 'border': 'transparent 1px solid', + 'borderRadius': theme.shape.borderRadius, + }), + }, + }, + MuiLink: { + defaultProps: { underline: 'none' }, + styleOverrides: { root: { '&:hover': { filter: 'brightness(75%)' } } }, + }, + MuiPaper: { defaultProps: { elevation: 0 } }, + MuiTableCell: { + styleOverrides: { + body: { + fontFamily: 'monospace', + whiteSpace: 'nowrap', + }, + head: { + fontWeight: 700, + whiteSpace: 'nowrap', + }, + }, + }, + MuiTooltip: { + styleOverrides: { + tooltip: ({ theme }) => ({ + ...theme.typography.body1, + color: 'inherit', + maxWidth: 250, + border: `1px solid ${theme.palette.background.default}`, + backgroundColor: theme.palette.background.paper, + padding: theme.spacing(1), + boxShadow: 'rgba(17, 12, 46, 0.15) 0px 48px 100px 0px', + }), + }, + }, + }, + ...spacingFragment, + ...shapeFragment, + typography: { + allVariants: { fontFamily: ['Manrope', 'san-serif'].join(',') }, + body1: { fontSize: '16px' }, + button: { + fontSize: '1rem', + textTransform: 'capitalize', + }, + fontWeightBold: 700, + fontWeightLight: 300, + fontWeightMedium: 600, + fontWeightRegular: 500, + h1: { fontSize: '3.2rem' }, + h2: { fontSize: '2.7rem' }, + h3: { fontSize: '2.24rem' }, + h4: { fontSize: '2rem' }, + h5: { fontSize: '1.5rem' }, + h6: { fontSize: '1.2rem' }, + subtitle1: { + fontWeight: 300, + opacity: '50%', + textTransform: 'uppercase', + }, + subtitle2: { opacity: '50%' }, + }, +}) diff --git a/packages/theme/src/showcase/theme/TypographyShowcase.stories.tsx b/packages/theme/src/showcase/theme/TypographyShowcase.stories.tsx new file mode 100644 index 00000000..8a813b3f --- /dev/null +++ b/packages/theme/src/showcase/theme/TypographyShowcase.stories.tsx @@ -0,0 +1,28 @@ +import { Box } from '@mui/material' +import type { Meta, StoryFn } from '@storybook/react' +import React from 'react' + +import { TypographyShowcase } from './TypographyShowcase.tsx' + +const StorybookEntry = { + argTypes: {}, + component: TypographyShowcase, + parameters: { docs: { page: null } }, + title: 'theme/showcase/TypographyShowcase', +} as Meta + +const Template: StoryFn = () => ( + + + +) + +const Default = Template.bind({}) +Default.args = { + error: new Error('Test Error'), + title: 'Test Error', +} + +export { Default } + +export default StorybookEntry diff --git a/packages/theme/src/showcase/theme/TypographyShowcase.tsx b/packages/theme/src/showcase/theme/TypographyShowcase.tsx new file mode 100644 index 00000000..95f29d00 --- /dev/null +++ b/packages/theme/src/showcase/theme/TypographyShowcase.tsx @@ -0,0 +1,112 @@ +import { + Stack, + Typography, + useTheme, +} from '@mui/material' +import React from 'react' + +export const TypographyShowcase: React.FC = () => { + const theme = useTheme() + return ( + + + Font Family: + {theme.typography.h1.fontFamily?.toString()} + + + + + + H1 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + + H2 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + + H3 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + + H4 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + + H5 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + + + + H6 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + + Body1 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius? + + + + + Body2 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius? + + + + + Subtitle1 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius? + + + + + Subtitle2 + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius? + + + + + Caption + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius? + + + + + + ) +} diff --git a/packages/theme/src/theme-fragments/components.tsx b/packages/theme/src/theme-fragments/components.tsx new file mode 100644 index 00000000..1772876d --- /dev/null +++ b/packages/theme/src/theme-fragments/components.tsx @@ -0,0 +1,126 @@ +import type { Theme } from '@mui/material' +import { + alpha, createTheme, lighten, +} from '@mui/material' + +export const componentFragment = (theme: Theme): Theme => createTheme({ + components: { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: alpha(theme.palette.background.paper, 0.3), + color: 'inherit', + }), + standardError: ({ theme }) => ({ backgroundColor: alpha(theme.palette.error.main, 0.3), color: theme.palette.error.light }), + standardInfo: ({ theme }) => ({ backgroundColor: alpha(theme.palette.info.main, 0.3), color: theme.palette.info.light }), + standardSuccess: ({ theme }) => ({ backgroundColor: alpha(theme.palette.success.main, 0.3), color: theme.palette.success.light }), + standardWarning: ({ theme }) => ({ backgroundColor: alpha(theme.palette.warning.main, 0.3), color: theme.palette.warning.light }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + padding: `${theme.spacing(0.75)} ${theme.spacing(1.5)}`, + borderWidth: '2px', + borderColor: 'inherit', + }), + }, + variants: [ + { + props: { variant: 'outlined' }, + style: { + 'WebkitBackdropFilter': 'blur(2px)', + 'backdropFilter': 'blur(2px)', + 'border': '2px solid', + '&:hover': { border: '2px solid' }, + }, + }, + { + props: { variant: 'text' }, + style: { + '&:hover': { + textDecoration: 'underline 1.5px #66caf7', + textUnderlineOffset: '5px', + backgroundColor: 'transparent', + }, + }, + }, + { + props: { size: 'small' }, + style: ({ theme }) => ({ padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, fontSize: '1rem' }), + }, + ], + }, + MuiCard: { + defaultProps: { elevation: 0 }, + styleOverrides: { + root: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + }, + }, + }, + MuiCardContent: { styleOverrides: { root: ({ theme }) => ({ '&:last-child': { paddingBottom: theme.spacing(1) } }) } }, + MuiChip: { + styleOverrides: { + root: { + borderRadius: 4, + fontWeight: 400, + }, + colorError: { backgroundColor: alpha('#f6594e', 0.2), color: lighten('#f6594e', 0.2) }, + colorInfo: { backgroundColor: alpha('#72b4f4', 0.2), color: lighten('#72b4f4', 0.2) }, + colorPrimary: { backgroundColor: alpha('#5658F3', 0.2), color: lighten('#5658F3', 0.2) }, + colorSecondary: { backgroundColor: alpha('#66caf7', 0.2), color: lighten('#66caf7', 0.2) }, + colorSuccess: { backgroundColor: alpha('#7efc81', 0.2), color: lighten('#7efc81', 0.2) }, + colorWarning: { backgroundColor: alpha('#f7d866', 0.2), color: lighten('#f7d866', 0.2) }, + }, + }, + MuiContainer: { styleOverrides: { root: { maxWidth: 'xl' } }, defaultProps: { maxWidth: 'xl' } }, + MuiDialog: { + styleOverrides: { + root: { + '& .MuiDialog-paper': { + backgroundImage: 'none', + paddingLeft: 2, + paddingRight: 2, + }, + }, + }, + }, + MuiInputBase: { + styleOverrides: { + input: { + '&:-webkit-autofill': { + transitionDelay: '9999s', + transitionProperty: 'background-color, color', + }, + }, + }, + }, + MuiFilledInput: { + styleOverrides: { + input: { + '&:-webkit-autofill': { + WebkitBoxShadow: 'inherit', + WebkitTextFillColor: 'inherit', + caretColor: 'inherit', + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + '&:-webkit-autofill': { + WebkitBoxShadow: 'inherit', + WebkitTextFillColor: 'inherit', + caretColor: 'inherit', + }, + }, + }, + }, + MuiLink: { styleOverrides: { root: { textDecoration: 'none' } } }, + }, +}) diff --git a/packages/theme/src/theme-fragments/index.ts b/packages/theme/src/theme-fragments/index.ts new file mode 100644 index 00000000..9ccadfe6 --- /dev/null +++ b/packages/theme/src/theme-fragments/index.ts @@ -0,0 +1,3 @@ +export * from './components.tsx' +export * from './shape.tsx' +export * from './spacing.tsx' diff --git a/packages/theme/src/theme-fragments/shape.tsx b/packages/theme/src/theme-fragments/shape.tsx new file mode 100644 index 00000000..87bebb32 --- /dev/null +++ b/packages/theme/src/theme-fragments/shape.tsx @@ -0,0 +1,4 @@ +import type { Theme } from '@mui/material' +import { createTheme } from '@mui/material' + +export const shapeFragment = (theme: Theme): Theme => createTheme({ shape: { borderRadius: 4 } }) diff --git a/packages/theme/src/theme-fragments/spacing.tsx b/packages/theme/src/theme-fragments/spacing.tsx new file mode 100644 index 00000000..de8019e8 --- /dev/null +++ b/packages/theme/src/theme-fragments/spacing.tsx @@ -0,0 +1,4 @@ +import type { Theme } from '@mui/material' +import { createTheme } from '@mui/material' + +export const spacingFragment = (theme: Theme): Theme => createTheme({ spacing: 8 })