adding themes and theme extenders

.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<ThemeName, Theme> = {
     '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] ?? {}
 }

packages/theme/src/product-theme/ThemeExtensions/index.ts

@@ -1 +1,2 @@
 export * from './customThemeColors.ts'
+export * from './typography.ts'

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,
+}

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: {

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'

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' },

packages/theme/src/product-theme/xyo-website/theme.ts → 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' },

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' } } },
+  },
+}

packages/theme/src/product-theme/xyos/index.ts

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

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' },
+  },
+}