@xyo-network/react-theme 2.26.37 → 2.26.38

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eeec410/packages/theme/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/c31a96d/packages/theme/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -74,5 +74,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.38"
 }

package/src/appThemeOptions.tsx

@@ -0,0 +1,30 @@
+import { ThemeOptions } from '@mui/material'
+import merge from 'lodash/merge'
+
+import { themeOptions } from './themeOptions'
+
+const partialAppThemeOptions: ThemeOptions = {
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: ({ ownerState }) => {
+          const { clamped } = ownerState
+
+          if (clamped) {
+            const maxWidth = parseInt(clamped as string, 10)
+
+            return {
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              width: `clamp(1%, 100%, ${maxWidth}px)`,
+            }
+          }
+        },
+      },
+    },
+  },
+  spacing: 8,
+}
+
+export const appThemeOptions = merge({}, themeOptions, partialAppThemeOptions)

package/src/fontFamily.ts

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

package/src/index.ts

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

package/src/partialDarkThemeOptions.tsx

@@ -0,0 +1,28 @@
+import { darken, ThemeOptions } from '@mui/material'
+import merge from 'lodash/merge'
+
+const appComponents: ThemeOptions['components'] = {
+  MuiPaper: {
+    defaultProps: {
+      variant: 'elevation',
+    },
+  },
+}
+
+export const partialDarkThemeOptions: ThemeOptions = {
+  palette: {
+    background: {
+      default: darken('#171626', 0.1),
+      paper: '#171626',
+    },
+    mode: 'dark',
+    primary: {
+      main: '#9993F5',
+    },
+    secondary: {
+      main: '#8EC8FF',
+    },
+  },
+}
+
+export const partialAppDarkThemeOptions: ThemeOptions = merge({}, partialDarkThemeOptions, { components: appComponents })

package/src/partialLightThemeOptions.tsx

@@ -0,0 +1,24 @@
+import { ThemeOptions } from '@mui/material'
+import merge from 'lodash/merge'
+
+const appComponents: ThemeOptions['components'] = {
+  MuiPaper: {
+    defaultProps: {
+      variant: 'outlined',
+    },
+  },
+}
+
+export const partialLightThemeOptions: ThemeOptions = {
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#1f1a66',
+    },
+    secondary: {
+      main: '#0f68c9',
+    },
+  },
+}
+
+export const partialAppLightThemeOptions: ThemeOptions = merge({}, partialLightThemeOptions, { components: appComponents })

package/src/themeOptions.ts

@@ -0,0 +1,103 @@
+import { ThemeOptions } from '@mui/material'
+
+import { fontFamilyPrimary } from './fontFamily'
+
+export const components: ThemeOptions['components'] = {
+  MuiCard: {
+    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%)',
+        },
+      },
+    },
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      body: {
+        fontFamily: 'monospace',
+        whiteSpace: 'nowrap',
+      },
+      head: {
+        fontWeight: 700,
+        whiteSpace: 'nowrap',
+      },
+    },
+  },
+}
+
+export const typography: ThemeOptions['typography'] = {
+  body1: {
+    lineHeight: 1.57,
+  },
+  body2: {
+    lineHeight: 1.57,
+  },
+  button: {
+    fontSize: '1rem',
+    textTransform: 'inherit',
+  },
+  fontFamily: fontFamilyPrimary,
+  fontWeightBold: 700,
+  fontWeightLight: 200,
+  fontWeightMedium: 600,
+  fontWeightRegular: 400,
+  h1: {
+    fontFamily: fontFamilyPrimary,
+    fontSize: '4rem',
+  },
+  h2: {
+    fontFamily: fontFamilyPrimary,
+    fontSize: '2.4rem',
+  },
+  h3: {
+    fontFamily: fontFamilyPrimary,
+    fontSize: '2.24rem',
+  },
+  h4: {
+    fontSize: '2rem',
+  },
+  h5: {
+    fontSize: '1.5rem',
+  },
+  h6: {
+    fontSize: '1.25rem',
+  },
+  subtitle1: {
+    opacity: '50%',
+    textTransform: 'uppercase',
+  },
+  subtitle2: {
+    opacity: '50%',
+  },
+}
+
+export const themeOptions: ThemeOptions = {
+  components,
+  shape: {
+    borderRadius: 8,
+  },
+  spacing: 16,
+  typography,
+}

package/src/webThemeOptions.tsx

@@ -0,0 +1,8 @@
+import { ThemeOptions } from '@mui/material'
+import merge from 'lodash/merge'
+
+import { themeOptions } from './themeOptions'
+
+const partialWebThemeOptions: ThemeOptions = {}
+
+export const webThemeOptions = merge({}, themeOptions, partialWebThemeOptions)