adding color & theme

.storybook/Theme/index.ts

@@ -1,2 +1,3 @@
 export * from './xyo-website/index.ts'
-export * from './dataism/index.ts'
+export * from './dataism/index.ts'
+export * from './xylabs/index.ts'

.storybook/main.ts

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    // 'storybook-dark-mode',
   ],
   framework: '@storybook/react-vite',
 }

.storybook/preview.tsx

@@ -2,8 +2,7 @@ import { Box, createTheme, CssBaseline, Theme, useTheme } from '@mui/material'
 import type { Decorator } from '@storybook/react'
 import { InvertibleMuiThemeProvider } from '@xylabs/react-invertible-theme'
 import React from 'react'
-import { XYOWebsiteTheme, DataismTheme } from './Theme'
-import { XyLabsTheme } from '@xylabs/react-theme'
+import { XYOWebsiteTheme, DataismTheme, XyLabsTheme } from '@xylabs/react-theme'
 
 const themeNames = ['None', 'XYO', 'Dataism', 'XYLabs'] as const
 type ThemeName = typeof themeNames[number]

packages/theme/src/ColorCard.tsx

@@ -0,0 +1,37 @@
+import type { BoxProps } from '@mui/material'
+import {
+  Box,
+  Typography, useTheme,
+} from '@mui/material'
+import React from 'react'
+
+export interface ColorCardProps extends BoxProps {
+  color: string
+  colorName: string
+  subtype?: string
+}
+
+export const ColorCard: React.FC<ColorCardProps> = ({
+  color, colorName, subtype, ...props
+}) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="space-between"
+      flex="1 1 0px"
+      padding={2}
+      {...props}
+    >
+      <Box flexDirection="column">
+        <Typography variant="caption">{subtype}</Typography>
+        <Typography variant="h6">
+          {colorName}
+        </Typography>
+      </Box>
+      <Typography alignSelf="flex-end" variant="caption">
+        {color}
+      </Typography>
+    </Box>
+  )
+}

packages/theme/src/ColorShowcase.stories.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { ColorShowcase } from './ColorShowcase.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ColorShowcase,
+  parameters: { docs: { page: null }, layout: 'fullscreen' },
+  title: 'Theme/ColorShowcase',
+} as Meta<typeof ColorShowcase>
+
+const Template: StoryFn<typeof ColorShowcase> = () => (
+  <Box display="flex" height="100vh" width="100vw">
+    <ColorShowcase></ColorShowcase>
+  </Box>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  error: new Error('Test Error'),
+  title: 'Test Error',
+}
+
+export { Default }
+
+export default StorybookEntry

packages/theme/src/ColorShowcase.tsx

@@ -0,0 +1,50 @@
+import {
+  Box,
+  useTheme,
+} from '@mui/material'
+import React from 'react'
+
+import { ColorCard } from './ColorCard.tsx'
+import { PaletteColorCard } from './PaletteColorCard.tsx'
+
+export const ColorShowcase: React.FC = () => {
+  const theme = useTheme()
+
+  return (
+    <Box display="flex" flexDirection="column" flex="1 1 0px">
+      <Box display="flex" flex="1 1 0px" flexDirection="row" justifyContent="stretch">
+        <ColorCard
+          bgcolor={theme.palette.background.default}
+          color={theme.palette.background.default as string}
+          colorName="Background"
+          subtype="default"
+        />
+        <ColorCard
+          bgcolor={theme.palette.background.paper}
+          color={theme.palette.background.paper as string}
+          colorName="Background"
+          subtype="paper"
+        />
+        <ColorCard
+          bgcolor={theme.palette.background.gradient}
+          color={theme.palette.background.gradient as string}
+          colorName="Gradient"
+        />
+      </Box>
+      <Box display="flex" flex="1 1 0px" flexDirection="row" justifyContent="stretch">
+        <PaletteColorCard color={theme.palette.primary} colorName="Primary" subtype="main" />
+        <PaletteColorCard color={theme.palette.secondary} colorName="Secondary" subtype="main" />
+        <Box display="flex" flex="1 1 0px" flexDirection="column">
+          <Box display="flex" flex="1 1 0px" flexDirection="row">
+            <PaletteColorCard color={theme.palette.info} colorName="Info" subtype="main" />
+            <PaletteColorCard color={theme.palette.success} colorName="Success" subtype="main" />
+          </Box>
+          <Box display="flex" flex="1 1 0px" flexDirection="row">
+            <PaletteColorCard color={theme.palette.warning} colorName="Warning" subtype="main" />
+            <PaletteColorCard color={theme.palette.error} colorName="Error" subtype="main" />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}

packages/theme/src/PaletteColorCard.stories.tsx

@@ -0,0 +1,29 @@
+import { Box, useTheme } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import type { PaletteColorCardProps } from './PaletteColorCard.tsx'
+import { PaletteColorCard } from './PaletteColorCard.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PaletteColorCard,
+  parameters: { docs: { page: null }, layout: 'fullscreen' },
+  title: 'Theme/PaletteColorCard',
+} as Meta<typeof PaletteColorCard>
+
+const Template: StoryFn<typeof PaletteColorCard> = (args: PaletteColorCardProps) => {
+  const theme = useTheme()
+  return (
+    <Box display="flex" height="100vh" width="100vw">
+      <PaletteColorCard {...args} color={theme.palette.primary} />
+    </Box>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = { colorName: 'Primary', subtype: 'main' }
+
+export { Default }
+
+export default StorybookEntry

packages/theme/src/PaletteColorCard.tsx

@@ -0,0 +1,37 @@
+import type {
+  Palette, PaletteColorOptions, PaletteOptions, SimplePaletteColorOptions,
+  TypeBackground,
+} from '@mui/material'
+import {
+  Box,
+  Typography, useTheme,
+} from '@mui/material'
+import React from 'react'
+
+export interface PaletteColorCardProps {
+  color: SimplePaletteColorOptions
+  colorName: string
+  subtype: keyof SimplePaletteColorOptions
+}
+
+export const PaletteColorCard: React.FC<PaletteColorCardProps> = ({
+  color, colorName, subtype,
+}) => {
+  const theme = useTheme()
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="space-between"
+      flex="1 1 0px"
+      bgcolor={color[subtype]}
+      padding={2}
+    >
+      <Box flexDirection="column">
+        <Typography variant="caption" color={color.contrastText}>{subtype}</Typography>
+        <Typography variant="h6" color={color.contrastText}>{colorName}</Typography>
+      </Box>
+      <Typography alignSelf="flex-end" variant="caption" color={color.contrastText}>{color[subtype]?.toString()}</Typography>
+    </Box>
+  )
+}

.storybook/Theme/xyo-website/customThemeColors.ts → packages/theme/src/ThemeExtensions/customThemeColors.ts

@@ -8,6 +8,10 @@ declare module '@mui/material/styles' {
   interface PaletteOptions {
     neutral?: PaletteOptions['primary']
   }
+
+  interface TypeBackground {
+    gradient?: string
+  }
 }
 
 declare module '@mui/material/Button' {

packages/theme/src/ThemeExtensions/index.ts

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

packages/theme/src/ThemeShowcase.stories.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { ThemeShowcase } from './ThemeShowcase.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ThemeShowcase,
+  parameters: { docs: { page: null } },
+  title: 'Theme/ThemeShowcase',
+} as Meta<typeof ThemeShowcase>
+
+const Template: StoryFn<typeof ThemeShowcase> = () => (
+  <Box height="100vh" width="100vw">
+    <ThemeShowcase></ThemeShowcase>
+  </Box>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  error: new Error('Test Error'),
+  title: 'Test Error',
+}
+
+export { Default }
+
+export default StorybookEntry

packages/theme/src/ThemeShowcase.tsx

@@ -0,0 +1,15 @@
+import {
+  Box,
+  Typography,
+} from '@mui/material'
+import React from 'react'
+
+export const ThemeShowcase: React.FC = () => {
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        XYO Website Theme Showcase
+      </Typography>
+    </Box>
+  )
+}

.storybook/Theme/dataism/darkThemePalette.tsx → packages/theme/src/dataism/darkThemePalette.tsx

@@ -3,8 +3,9 @@ import type { ColorSystemOptions } from '@mui/material'
 import { personaColorsDarkMode } from './customThemeColors.tsx'
 
 export const darkThemePalette: ColorSystemOptions['palette'] = {
-  background: { paper: '#1E1E1E' },
+  background: { paper: '#1E1E1E', gradient: 'linear-gradient(to right, #fff, #66caf7)' },
   info: { main: '#72b4f4' },
+  mode: 'dark',
   primary: { main: '#fff' },
   secondary: {
     main: '#66caf7',

packages/theme/src/dataism/index.ts

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

.storybook/Theme/dataism/lightThemePalette.tsx → packages/theme/src/dataism/lightThemePalette.tsx

@@ -3,8 +3,9 @@ import type { ColorSystemOptions } from '@mui/material'
 import { personaColorsLightMode } from './customThemeColors.tsx'
 
 export const lightThemePalette: ColorSystemOptions['palette'] = {
-  background: { paper: '#FAFAFA' },
+  background: { paper: '#FAFAFA', gradient: 'linear-gradient(to right, #000, #186ecc)' },
   info: { main: '#72b4f4' },
+  mode: 'light',
   primary: { main: '#000' },
   secondary: { main: '#186ecc' },
   success: { main: '#48BA4B', contrastText: '#fff' },

packages/theme/src/index.ts

@@ -1,3 +1,3 @@
-export * from './darkThemeOptions.ts'
-export * from './lightThemeOptions.ts'
-export * from './theme.ts'
+export * from './dataism/index.ts'
+export * from './xylabs/index.ts'
+export * from './xyo-website/index.ts'

packages/theme/src/darkThemeOptions.ts → packages/theme/src/xylabs/darkThemeOptions.tsx

@@ -5,7 +5,9 @@ export const darkThemeOptions: ThemeOptions = {
     background: {
       default: '#0b0f30',
       paper: '#101742',
+      gradient: 'linear-gradient(to right, #384AFD, #FFC91D)',
     },
+    mode: 'dark',
     text: {
       disabled: '#a5acdb',
       primary: '#f7f8fc',

packages/theme/src/xylabs/index.ts

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

packages/theme/src/lightThemeOptions.ts → packages/theme/src/xylabs/lightThemeOptions.tsx

@@ -2,7 +2,9 @@ import type { ThemeOptions } from '@mui/material'
 
 export const lightThemeOptions: ThemeOptions = {
   palette: {
+    background: { gradient: 'linear-gradient(to right, #384AFD, #FFC91D)' },
     info: { main: '#2733B1' },
+    mode: 'light',
     primary: {
       dark: '#010965',
       light: '#EBECFF',

packages/theme/src/theme.ts → packages/theme/src/xylabs/theme.tsx

@@ -1,7 +1,7 @@
 import { createTheme, type Theme } from '@mui/material'
 
-import { darkThemeOptions } from './darkThemeOptions.ts'
-import { lightThemeOptions } from './lightThemeOptions.ts'
+import { darkThemeOptions } from './darkThemeOptions.tsx'
+import { lightThemeOptions } from './lightThemeOptions.tsx'
 
 export const XyLabsTheme: Theme = createTheme({
   colorSchemes: {

.storybook/Theme/xyo-website/darkThemeOptions.tsx → packages/theme/src/xyo-website/darkThemeOptions.tsx

@@ -2,18 +2,21 @@ import {
   alpha, lighten, type ThemeOptions,
 } from '@mui/material'
 
-import { neutralButtonStylesContained, neutralButtonStylesOutlined } from './customThemeColors.ts'
+import { neutralButtonStylesContained, neutralButtonStylesOutlined } from '../ThemeExtensions/customThemeColors.ts'
+
 export const darkThemeOptions: ThemeOptions = {
   palette: {
     background: {
       default: '#020223',
       paper: '#16163D',
+      gradient: 'linear-gradient(to right, #66caf7, #5658F3)',
     },
     neutral: {
       main: '#fff',
       contrastText: '#000',
     },
     info: { main: '#72b4f4' },
+    mode: 'dark',
     primary: { main: '#5658F3' },
     secondary: {
       main: '#66caf7',
@@ -83,13 +86,6 @@ export const darkThemeOptions: ThemeOptions = {
         },
       },
     },
-    MuiTable: {
-      styleOverrides:{
-        root: {
-          background: '#20205A'
-        },
-      }
-    },
+    MuiTable: { styleOverrides: { root: { background: '#20205A' } } },
   },
 }
-

packages/theme/src/xyo-website/index.ts

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

.storybook/Theme/xyo-website/lightThemeOptions.tsx → packages/theme/src/xyo-website/lightThemeOptions.tsx

@@ -1,10 +1,14 @@
-import { alpha, ThemeOptions } from '@mui/material'
+import type { ThemeOptions } from '@mui/material'
+import { alpha } from '@mui/material'
 
 export const lightThemeOptions: ThemeOptions = {
   palette: {
-    background: { paper: '#FAFAFA' },
+    background: {
+      paper: '#FAFAFA',
+      gradient: 'linear-gradient(to right, #72b4f4, #463dc6)',
+    },
     neutral: {
-      contrastText: '#fff', 
+      contrastText: '#fff',
       main: '#000',
     },
     info: { main: '#72b4f4' },