@xyo-network/react-theme 2.67.18 → 2.68.0-rc.2

package/src/OsTheme/Components.tsx

@@ -0,0 +1,54 @@
+import { ThemeOptions } from '@mui/material'
+
+export const components: ThemeOptions['components'] = {
+  MuiCard: {
+    defaultProps: {
+      elevation: 0,
+    },
+    styleOverrides: {
+      root: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      },
+    },
+  },
+  MuiCardHeader: {
+    styleOverrides: {
+      content: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      },
+    },
+  },
+  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',
+      },
+    },
+  },
+}

package/src/OsTheme/DarkMode.tsx

@@ -0,0 +1,35 @@
+import { ThemeOptions } from '@mui/material'
+
+import { components } from './Components'
+import { typography } from './Typography'
+
+const palette: ThemeOptions['palette'] = {
+  background: {
+    default: '#141319',
+    paper: '#1C1B20',
+  },
+  error: {
+    main: '#ffb4ab',
+  },
+  mode: 'dark',
+  primary: {
+    main: '#C9BFFA',
+  },
+  secondary: {
+    main: '#C9C3DA',
+  },
+  text: {
+    primary: '#100029',
+    secondary: '#212023',
+  },
+}
+
+export const osThemeOptionsDarkMode: ThemeOptions = {
+  components,
+  palette,
+  shape: {
+    borderRadius: 10,
+  },
+  spacing: 16,
+  typography,
+}

package/src/OsTheme/LightMode.tsx

@@ -0,0 +1,35 @@
+import { ThemeOptions } from '@mui/material'
+
+import { components } from './Components'
+import { typography } from './Typography'
+
+const palette: ThemeOptions['palette'] = {
+  background: {
+    default: '#FFFFFF',
+    paper: '#F6F4ED',
+  },
+  error: {
+    main: '#BA1A1A',
+  },
+  mode: 'light',
+  primary: {
+    main: '#100029',
+  },
+  secondary: {
+    main: '#A060E0',
+  },
+  text: {
+    primary: '#100029',
+    secondary: '#212023',
+  },
+}
+
+export const osThemeOptionsLightMode: ThemeOptions = {
+  components,
+  palette,
+  shape: {
+    borderRadius: 10,
+  },
+  spacing: 16,
+  typography,
+}

package/src/OsTheme/Typography.tsx

@@ -0,0 +1,45 @@
+import { ThemeOptions } from '@mui/material'
+
+import { fontFamilyOs } from '../fontFamily'
+
+export const typography: ThemeOptions['typography'] = {
+  body1: {
+    lineHeight: 1.57,
+  },
+  body2: {
+    lineHeight: 1.57,
+  },
+  button: {
+    fontSize: '1rem',
+    textTransform: 'inherit',
+  },
+  fontFamily: fontFamilyOs,
+  fontWeightBold: 700,
+  fontWeightLight: 300,
+  fontWeightMedium: 600,
+  fontWeightRegular: 500,
+  h1: {
+    fontSize: '4rem',
+  },
+  h2: {
+    fontSize: '2.4rem',
+  },
+  h3: {
+    fontSize: '2.24rem',
+  },
+  h4: {
+    fontSize: '2rem',
+  },
+  h5: {
+    fontSize: '1.5rem',
+  },
+  h6: {
+    fontSize: '1.1rem',
+  },
+  subtitle1: {
+    opacity: '70%',
+  },
+  subtitle2: {
+    opacity: '70%',
+  },
+}

package/src/OsTheme/index.ts

@@ -0,0 +1 @@
+export * from './osThemeOptions'

package/src/OsTheme/osThemeOptions.tsx

@@ -0,0 +1,6 @@
+import { merge } from '@xylabs/lodash'
+
+import { osThemeOptionsDarkMode } from './DarkMode'
+import { osThemeOptionsLightMode } from './LightMode'
+
+export const osThemeOptions = merge({}, osThemeOptionsDarkMode, osThemeOptionsLightMode)

package/src/fontFamily.ts

@@ -1 +1,2 @@
 export const fontFamilyPrimary = ['Lexend Deca', 'Helvetica', 'sans-serif'].join(',')
+export const fontFamilyOs = ['Manrope', 'Roboto', 'sans-serif'].join(',')

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './appThemeOptions'
 export * from './fontFamily'
+export * from './OsTheme'
 export * from './partialDarkThemeOptions'
 export * from './partialLightThemeOptions'
 export * from './themeOptions'

package/src/partialLightThemeOptions.tsx

@@ -1,14 +1,6 @@
 import { ThemeOptions } from '@mui/material'
 import { merge } from '@xylabs/lodash'
 
-const appComponents: ThemeOptions['components'] = {
-  MuiPaper: {
-    defaultProps: {
-      variant: 'outlined',
-    },
-  },
-}
-
 export const partialLightThemeOptions: ThemeOptions = {
   palette: {
     mode: 'light',
@@ -21,4 +13,4 @@ export const partialLightThemeOptions: ThemeOptions = {
   },
 }
 
-export const partialAppLightThemeOptions: ThemeOptions = merge({}, partialLightThemeOptions, { components: appComponents })
+export const partialAppLightThemeOptions: ThemeOptions = merge({}, partialLightThemeOptions)