From 4397a3d00b9b1b4bf717d5a03b3c6b9aa4fa8e59 Mon Sep 17 00:00:00 2001 From: Jordan Trouw Date: Fri, 22 Nov 2024 15:52:53 -0800 Subject: [PATCH] adding color & theme --- .storybook/Theme/dataism/index.ts | 1 - .storybook/Theme/index.ts | 3 +- .storybook/Theme/xyo-website/index.ts | 1 - .storybook/main.ts | 1 + .storybook/preview.tsx | 3 +- packages/theme/src/ColorCard.tsx | 37 ++++++++++++++ packages/theme/src/ColorShowcase.stories.tsx | 28 +++++++++++ packages/theme/src/ColorShowcase.tsx | 50 +++++++++++++++++++ .../theme/src/PaletteColorCard.stories.tsx | 29 +++++++++++ packages/theme/src/PaletteColorCard.tsx | 37 ++++++++++++++ .../src/ThemeExtensions}/customThemeColors.ts | 4 ++ packages/theme/src/ThemeExtensions/index.ts | 1 + packages/theme/src/ThemeShowcase.stories.tsx | 28 +++++++++++ packages/theme/src/ThemeShowcase.tsx | 15 ++++++ .../theme/src}/dataism/customThemeColors.tsx | 0 .../theme/src}/dataism/darkThemePalette.tsx | 3 +- packages/theme/src/dataism/index.ts | 1 + .../theme/src}/dataism/lightThemePalette.tsx | 3 +- .../theme/src}/dataism/theme.tsx | 0 packages/theme/src/index.ts | 6 +-- .../darkThemeOptions.tsx} | 2 + packages/theme/src/xylabs/index.ts | 1 + .../lightThemeOptions.tsx} | 2 + .../theme/src/{theme.ts => xylabs/theme.tsx} | 4 +- .../src}/xyo-website/darkThemeOptions.tsx | 14 ++---- packages/theme/src/xyo-website/index.ts | 1 + .../src}/xyo-website/lightThemeOptions.tsx | 10 ++-- .../theme/src/xyo-website/theme.ts | 10 ++-- 28 files changed, 266 insertions(+), 29 deletions(-) delete mode 100644 .storybook/Theme/dataism/index.ts delete mode 100644 .storybook/Theme/xyo-website/index.ts create mode 100644 packages/theme/src/ColorCard.tsx create mode 100644 packages/theme/src/ColorShowcase.stories.tsx create mode 100644 packages/theme/src/ColorShowcase.tsx create mode 100644 packages/theme/src/PaletteColorCard.stories.tsx create mode 100644 packages/theme/src/PaletteColorCard.tsx rename {.storybook/Theme/xyo-website => packages/theme/src/ThemeExtensions}/customThemeColors.ts (94%) create mode 100644 packages/theme/src/ThemeExtensions/index.ts create mode 100644 packages/theme/src/ThemeShowcase.stories.tsx create mode 100644 packages/theme/src/ThemeShowcase.tsx rename {.storybook/Theme => packages/theme/src}/dataism/customThemeColors.tsx (100%) rename {.storybook/Theme => packages/theme/src}/dataism/darkThemePalette.tsx (84%) create mode 100644 packages/theme/src/dataism/index.ts rename {.storybook/Theme => packages/theme/src}/dataism/lightThemePalette.tsx (81%) rename {.storybook/Theme => packages/theme/src}/dataism/theme.tsx (100%) rename packages/theme/src/{darkThemeOptions.ts => xylabs/darkThemeOptions.tsx} (78%) create mode 100644 packages/theme/src/xylabs/index.ts rename packages/theme/src/{lightThemeOptions.ts => xylabs/lightThemeOptions.tsx} (82%) rename packages/theme/src/{theme.ts => xylabs/theme.tsx} (92%) rename {.storybook/Theme => packages/theme/src}/xyo-website/darkThemeOptions.tsx (92%) create mode 100644 packages/theme/src/xyo-website/index.ts rename {.storybook/Theme => packages/theme/src}/xyo-website/lightThemeOptions.tsx (59%) rename .storybook/Theme/xyo-website/Theme.ts => packages/theme/src/xyo-website/theme.ts (95%) diff --git a/.storybook/Theme/dataism/index.ts b/.storybook/Theme/dataism/index.ts deleted file mode 100644 index 88fe5b33..00000000 --- a/.storybook/Theme/dataism/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './theme' \ No newline at end of file diff --git a/.storybook/Theme/index.ts b/.storybook/Theme/index.ts index abe0daf4..40f117fa 100644 --- a/.storybook/Theme/index.ts +++ b/.storybook/Theme/index.ts @@ -1,2 +1,3 @@ export * from './xyo-website/index.ts' -export * from './dataism/index.ts' \ No newline at end of file +export * from './dataism/index.ts' +export * from './xylabs/index.ts' \ No newline at end of file diff --git a/.storybook/Theme/xyo-website/index.ts b/.storybook/Theme/xyo-website/index.ts deleted file mode 100644 index c8bb4cf4..00000000 --- a/.storybook/Theme/xyo-website/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Theme' \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 0fd3a5e1..7912680e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -5,6 +5,7 @@ const config: StorybookConfig = { addons: [ '@storybook/addon-links', '@storybook/addon-essentials', + // 'storybook-dark-mode', ], framework: '@storybook/react-vite', } diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index f66e35b0..e95ea40a 100644 --- a/.storybook/preview.tsx +++ b/.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] diff --git a/packages/theme/src/ColorCard.tsx b/packages/theme/src/ColorCard.tsx new file mode 100644 index 00000000..f75ae2bb --- /dev/null +++ b/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 = ({ + color, colorName, subtype, ...props +}) => { + return ( + + + {subtype} + + {colorName} + + + + {color} + + + ) +} diff --git a/packages/theme/src/ColorShowcase.stories.tsx b/packages/theme/src/ColorShowcase.stories.tsx new file mode 100644 index 00000000..e69998f9 --- /dev/null +++ b/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 + +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/ColorShowcase.tsx b/packages/theme/src/ColorShowcase.tsx new file mode 100644 index 00000000..1f8c46af --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/theme/src/PaletteColorCard.stories.tsx b/packages/theme/src/PaletteColorCard.stories.tsx new file mode 100644 index 00000000..9351a332 --- /dev/null +++ b/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 + +const Template: StoryFn = (args: PaletteColorCardProps) => { + const theme = useTheme() + return ( + + + + ) +} + +const Default = Template.bind({}) +Default.args = { colorName: 'Primary', subtype: 'main' } + +export { Default } + +export default StorybookEntry diff --git a/packages/theme/src/PaletteColorCard.tsx b/packages/theme/src/PaletteColorCard.tsx new file mode 100644 index 00000000..606b7e16 --- /dev/null +++ b/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 = ({ + color, colorName, subtype, +}) => { + const theme = useTheme() + return ( + + + {subtype} + {colorName} + + {color[subtype]?.toString()} + + ) +} diff --git a/.storybook/Theme/xyo-website/customThemeColors.ts b/packages/theme/src/ThemeExtensions/customThemeColors.ts similarity index 94% rename from .storybook/Theme/xyo-website/customThemeColors.ts rename to packages/theme/src/ThemeExtensions/customThemeColors.ts index 562f145c..81541444 100644 --- a/.storybook/Theme/xyo-website/customThemeColors.ts +++ b/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' { diff --git a/packages/theme/src/ThemeExtensions/index.ts b/packages/theme/src/ThemeExtensions/index.ts new file mode 100644 index 00000000..5f995e99 --- /dev/null +++ b/packages/theme/src/ThemeExtensions/index.ts @@ -0,0 +1 @@ +export * from './customThemeColors.ts' diff --git a/packages/theme/src/ThemeShowcase.stories.tsx b/packages/theme/src/ThemeShowcase.stories.tsx new file mode 100644 index 00000000..fcd404d9 --- /dev/null +++ b/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 + +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/ThemeShowcase.tsx b/packages/theme/src/ThemeShowcase.tsx new file mode 100644 index 00000000..a3a98813 --- /dev/null +++ b/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 ( + + + XYO Website Theme Showcase + + + ) +} diff --git a/.storybook/Theme/dataism/customThemeColors.tsx b/packages/theme/src/dataism/customThemeColors.tsx similarity index 100% rename from .storybook/Theme/dataism/customThemeColors.tsx rename to packages/theme/src/dataism/customThemeColors.tsx diff --git a/.storybook/Theme/dataism/darkThemePalette.tsx b/packages/theme/src/dataism/darkThemePalette.tsx similarity index 84% rename from .storybook/Theme/dataism/darkThemePalette.tsx rename to packages/theme/src/dataism/darkThemePalette.tsx index 4b3c3b19..890d4e91 100644 --- a/.storybook/Theme/dataism/darkThemePalette.tsx +++ b/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', diff --git a/packages/theme/src/dataism/index.ts b/packages/theme/src/dataism/index.ts new file mode 100644 index 00000000..907df5a0 --- /dev/null +++ b/packages/theme/src/dataism/index.ts @@ -0,0 +1 @@ +export * from './theme.tsx' diff --git a/.storybook/Theme/dataism/lightThemePalette.tsx b/packages/theme/src/dataism/lightThemePalette.tsx similarity index 81% rename from .storybook/Theme/dataism/lightThemePalette.tsx rename to packages/theme/src/dataism/lightThemePalette.tsx index 76b1bda2..944cb176 100644 --- a/.storybook/Theme/dataism/lightThemePalette.tsx +++ b/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' }, diff --git a/.storybook/Theme/dataism/theme.tsx b/packages/theme/src/dataism/theme.tsx similarity index 100% rename from .storybook/Theme/dataism/theme.tsx rename to packages/theme/src/dataism/theme.tsx diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index cc71ede6..f03bb5c3 100644 --- a/packages/theme/src/index.ts +++ b/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' diff --git a/packages/theme/src/darkThemeOptions.ts b/packages/theme/src/xylabs/darkThemeOptions.tsx similarity index 78% rename from packages/theme/src/darkThemeOptions.ts rename to packages/theme/src/xylabs/darkThemeOptions.tsx index 130ecee5..ec6465ee 100644 --- a/packages/theme/src/darkThemeOptions.ts +++ b/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', diff --git a/packages/theme/src/xylabs/index.ts b/packages/theme/src/xylabs/index.ts new file mode 100644 index 00000000..907df5a0 --- /dev/null +++ b/packages/theme/src/xylabs/index.ts @@ -0,0 +1 @@ +export * from './theme.tsx' diff --git a/packages/theme/src/lightThemeOptions.ts b/packages/theme/src/xylabs/lightThemeOptions.tsx similarity index 82% rename from packages/theme/src/lightThemeOptions.ts rename to packages/theme/src/xylabs/lightThemeOptions.tsx index 4c0d10b0..51cee01c 100644 --- a/packages/theme/src/lightThemeOptions.ts +++ b/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', diff --git a/packages/theme/src/theme.ts b/packages/theme/src/xylabs/theme.tsx similarity index 92% rename from packages/theme/src/theme.ts rename to packages/theme/src/xylabs/theme.tsx index efef9109..aeb084a4 100644 --- a/packages/theme/src/theme.ts +++ b/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: { diff --git a/.storybook/Theme/xyo-website/darkThemeOptions.tsx b/packages/theme/src/xyo-website/darkThemeOptions.tsx similarity index 92% rename from .storybook/Theme/xyo-website/darkThemeOptions.tsx rename to packages/theme/src/xyo-website/darkThemeOptions.tsx index d50025c0..d3d4826c 100644 --- a/.storybook/Theme/xyo-website/darkThemeOptions.tsx +++ b/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' } } }, }, } - diff --git a/packages/theme/src/xyo-website/index.ts b/packages/theme/src/xyo-website/index.ts new file mode 100644 index 00000000..a685f9b3 --- /dev/null +++ b/packages/theme/src/xyo-website/index.ts @@ -0,0 +1 @@ +export * from './theme.ts' diff --git a/.storybook/Theme/xyo-website/lightThemeOptions.tsx b/packages/theme/src/xyo-website/lightThemeOptions.tsx similarity index 59% rename from .storybook/Theme/xyo-website/lightThemeOptions.tsx rename to packages/theme/src/xyo-website/lightThemeOptions.tsx index 5e981b98..9259d34e 100644 --- a/.storybook/Theme/xyo-website/lightThemeOptions.tsx +++ b/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' }, diff --git a/.storybook/Theme/xyo-website/Theme.ts b/packages/theme/src/xyo-website/theme.ts similarity index 95% rename from .storybook/Theme/xyo-website/Theme.ts rename to packages/theme/src/xyo-website/theme.ts index 220a50d5..149b24fb 100644 --- a/.storybook/Theme/xyo-website/Theme.ts +++ b/packages/theme/src/xyo-website/theme.ts @@ -1,15 +1,15 @@ import type { Theme } from '@mui/material' import { - alpha, createTheme, lighten, darken + alpha, createTheme, darken, } from '@mui/material' -import { darkThemeOptions } from './darkThemeOptions' -import { lightThemeOptions } from './lightThemeOptions' +import { darkThemeOptions } from './darkThemeOptions.tsx' +import { lightThemeOptions } from './lightThemeOptions.tsx' export const XYOWebsiteTheme = (theme: Theme, rtl = false): Theme => createTheme({ colorSchemes: { dark: darkThemeOptions, - light:lightThemeOptions, + light: lightThemeOptions, }, cssVariables: { colorSchemeSelector: 'class' }, direction: rtl ? 'rtl' : 'ltr', @@ -152,4 +152,4 @@ export const XYOWebsiteTheme = (theme: Theme, rtl = false): Theme => createTheme }, subtitle2: { opacity: '50%' }, }, -}) \ No newline at end of file +})