Storybook Themes

xylabs · Nov 20, 2024 · ca7808d · ca7808d
1 parent 15d6d57
commit ca7808d
Show file tree

Hide file tree

Showing 52 changed files with 2,201 additions and 1,374 deletions.
diff --git a/.storybook/Theme/dataism/customThemeColors.tsx b/.storybook/Theme/dataism/customThemeColors.tsx
@@ -0,0 +1,132 @@
+import type { PaletteColor, PaletteColorOptions } from '@mui/material'
+import { darken, lighten } from '@mui/material'
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    personas: {
+      aegis: PaletteColor
+      cass: PaletteColor
+      echo: PaletteColor
+      lux: PaletteColor
+      myca: PaletteColor
+      nova: PaletteColor
+      rook: PaletteColor
+      vex: PaletteColor
+    }
+  }
+
+  interface PaletteOptions {
+    personas?: {
+      aegis?: PaletteColorOptions
+      cass?: PaletteColorOptions
+      echo?: PaletteColorOptions
+      lux?: PaletteColorOptions
+      myca?: PaletteColorOptions
+      nova?: PaletteColorOptions
+      rook?: PaletteColorOptions
+      vex?: PaletteColorOptions
+    }
+  }
+}
+
+export const personaColorsLightMode = {
+  nova: {
+    main: '#F6BF28',
+    dark: '#D09E16',
+    light: lighten('#FADD8C', 0.4),
+    contrastText: darken('#FADD8C', 0.8),
+  },
+  vex: {
+    main: '#BFF07F',
+    dark: '#8FCC3E',
+    light: lighten('#BFF07F', 0.4),
+    contrastText: darken('#BFF07F', 0.8),
+  },
+  rook: {
+    main: '#B0AED5',
+    dark: '#615dac',
+    light: lighten('#B0AED5', 0.4),
+    contrastText: darken('#B0AED5', 0.8),
+  },
+  lux: {
+    main: '#FFDBF6',
+    dark: '#FF5CD6',
+    light: lighten('#FFDBF6', 0.4),
+    contrastText: darken('#FFDBF6', 0.8),
+  },
+  aegis: {
+    main: '#B3C9F9',
+    dark: '#7AA1F5',
+    light: lighten('#B3C9F9', 0.4),
+    contrastText: darken('#B3C9F9', 0.8),
+  },
+  echo: {
+    main: '#B0E4DA',
+    dark: '#49C1A9',
+    light: lighten('#B0E4DA', 0.4),
+    contrastText: darken('#B0E4DA', 0.8),
+  },
+  myca: {
+    main: '#BF936D',
+    dark: '#AA774B',
+    light: lighten('#BF936D', 0.4),
+    contrastText: darken('#BF936D', 0.8),
+  },
+  cass: {
+    main: '#b2cae4',
+    dark: '#4078B5',
+    light: lighten('#b2cae4', 0.4),
+    contrastText: darken('#b2cae4', 0.8),
+  },
+}
+
+export const personaColorsDarkMode = {
+  nova: {
+    main: '#FADD8C',
+    contrastText: darken('#FADD8C', 0.9),
+    light: lighten('#FADD8C', 0.4),
+    dark: darken('#FADD8C', 0.5),
+  },
+  vex: {
+    main: '#BFF07F',
+    contrastText: darken('#BFF07F', 0.9),
+    light: lighten('#BFF07F', 0.4),
+    dark: darken('#BFF07F', 0.5),
+  },
+  rook: {
+    main: '#8B88C2',
+    contrastText: darken('#8B88C2', 0.9),
+    light: lighten('#8B88C2', 0.4),
+    dark: darken('#8B88C2', 0.5),
+  },
+  lux: {
+    main: '#EB97D6',
+    contrastText: darken('#EB97D6', 0.9),
+    light: lighten('#EB97D6', 0.4),
+    dark: darken('#EB97D6', 0.5),
+  },
+  aegis: {
+    main: '#7aa1f5',
+    contrastText: darken('#7aa1f5', 0.9),
+    light: lighten('#7aa1f5', 0.4),
+    dark: darken('#7aa1f5', 0.5),
+  },
+  echo: {
+    main: '#B0E4DA',
+    contrastText: darken('#B0E4DA', 0.9),
+    light: lighten('#B0E4DA', 0.4),
+    dark: darken('#B0E4DA', 0.5),
+  },
+  myca: {
+    main: '#BF936D',
+    contrastText: darken('#BF936D', 0.9),
+    light: lighten('#BF936D', 0.4),
+    dark: darken('#BF936D', 0.5),
+  },
+  cass: {
+    main: '#b2cae4',
+    contrastText: darken('#b2cae4', 0.9),
+    light: lighten('#b2cae4', 0.4),
+    dark: darken('#b2cae4', 0.5),
+  },
+}
diff --git a/.storybook/Theme/dataism/darkThemePalette.tsx b/.storybook/Theme/dataism/darkThemePalette.tsx
@@ -0,0 +1,26 @@
+import type { ColorSystemOptions } from '@mui/material'
+
+import { personaColorsDarkMode } from './customThemeColors.tsx'
+
+export const darkThemePalette: ColorSystemOptions['palette'] = {
+  background: { paper: '#1E1E1E' },
+  info: { main: '#72b4f4' },
+  mode: 'dark',
+  primary: { main: '#fff' },
+  secondary: {
+    main: '#66caf7',
+    contrastText: '#020223',
+  },
+  success: {
+    main: '#7efc81',
+    contrastText: '#011e01',
+  },
+  warning: { main: '#f7d866' },
+  error: { main: '#f6594e' },
+  text: {
+    disabled: '#a5acdb',
+    primary: '#E3E4EB',
+    secondary: '#e3e4eba3',
+  },
+  personas: personaColorsDarkMode,
+}
diff --git a/.storybook/Theme/dataism/index.ts b/.storybook/Theme/dataism/index.ts
@@ -0,0 +1 @@
+export * from './theme'
diff --git a/.storybook/Theme/dataism/lightThemePalette.tsx b/.storybook/Theme/dataism/lightThemePalette.tsx
@@ -0,0 +1,18 @@
+import type { ColorSystemOptions } from '@mui/material'
+
+import { personaColorsLightMode } from './customThemeColors.tsx'
+
+export const lightThemePalette: ColorSystemOptions['palette'] = {
+  background: { paper: '#FAFAFA' },
+  info: { main: '#72b4f4' },
+  mode: 'light',
+  primary: { main: '#000' },
+  secondary: { main: '#186ecc' },
+  success: { main: '#48BA4B', contrastText: '#fff' },
+  text: {
+    disabled: '#D3D0CB',
+    primary: '#1E2019',
+    secondary: '#393E41',
+  },
+  personas: personaColorsLightMode,
+}
diff --git a/.storybook/Theme/dataism/theme.tsx b/.storybook/Theme/dataism/theme.tsx
@@ -0,0 +1,167 @@
+import type { Theme } from '@mui/material'
+import {
+  alpha, createTheme, lighten,
+} from '@mui/material'
+
+import { darkThemePalette } from './darkThemePalette.tsx'
+import { lightThemePalette } from './lightThemePalette.tsx'
+
+export const DataismTheme: Theme = createTheme({
+  colorSchemes: {
+    dark: { palette: darkThemePalette },
+    light: { palette: lightThemePalette },
+  },
+  breakpoints: {
+    values: {
+      lg: 1350,
+      md: 900,
+      sm: 600,
+      xl: 1536,
+      xs: 0,
+    },
+  },
+  components: {
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: alpha(theme.palette.background.paper, 0.3),
+          color: 'inherit',
+        }),
+        standardError: ({ theme }) => ({ backgroundColor: alpha(theme.palette.error.main, 0.3), color: theme.palette.error.light }),
+        standardInfo: ({ theme }) => ({ backgroundColor: alpha(theme.palette.info.main, 0.3), color: theme.palette.info.light }),
+        standardSuccess: ({ theme }) => ({ backgroundColor: alpha(theme.palette.success.main, 0.3), color: theme.palette.success.light }),
+        standardWarning: ({ theme }) => ({ backgroundColor: alpha(theme.palette.warning.main, 0.3), color: theme.palette.warning.light }),
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          boxShadow: 'none',
+          padding: `${theme.spacing(0.75)} ${theme.spacing(1.5)}`,
+          borderWidth: '2px',
+          borderColor: 'inherit',
+        }),
+      },
+      variants: [
+        {
+          props: { variant: 'outlined' },
+          style: {
+            'WebkitBackdropFilter': 'blur(2px)',
+            'backdropFilter': 'blur(2px)',
+            'border': '2px solid',
+            '&:hover': { border: '2px solid' },
+          },
+        },
+        {
+          props: { variant: 'text' },
+          style: {
+            '&:hover': {
+              textDecoration: 'underline 1.5px #66caf7',
+              textUnderlineOffset: '5px',
+              backgroundColor: 'transparent',
+            },
+          },
+        },
+        {
+          props: { size: 'small' },
+          style: ({ theme }) => ({ padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, fontSize: '1rem' }),
+        },
+      ],
+    },
+    MuiCard: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: {
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        },
+      },
+    },
+    MuiCardContent: { styleOverrides: { root: ({ theme }) => ({ '&:last-child': { paddingBottom: theme.spacing(1) } }) } },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          fontWeight: 400,
+        },
+        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) },
+      },
+    },
+    MuiContainer: { styleOverrides: { root: { maxWidth: 'xl' } }, defaultProps: { maxWidth: 'xl' } },
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          '& .MuiDialog-paper': {
+            backgroundImage: 'none',
+            paddingLeft: 2,
+            paddingRight: 2,
+          },
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          '&:-webkit-autofill': {
+            transitionDelay: '9999s',
+            transitionProperty: 'background-color, color',
+          },
+        },
+      },
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        input: {
+          '&:-webkit-autofill': {
+            WebkitBoxShadow: 'inherit',
+            WebkitTextFillColor: 'inherit',
+            caretColor: 'inherit',
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          '&:-webkit-autofill': {
+            WebkitBoxShadow: 'inherit',
+            WebkitTextFillColor: 'inherit',
+            caretColor: 'inherit',
+          },
+        },
+      },
+    },
+    MuiLink: { styleOverrides: { root: { textDecoration: 'none' } } },
+  },
+  shape: { borderRadius: 8 },
+  spacing: 12,
+  typography: {
+    body1: { fontSize: '1.1rem' },
+    button: {
+      fontSize: '1rem',
+      textTransform: 'inherit',
+    },
+    fontFamily: '"Fustat", sans-serif',
+    fontWeightBold: 700,
+    fontWeightLight: 300,
+    fontWeightMedium: 500,
+    fontWeightRegular: 400,
+    h1: { fontSize: '3.2rem' },
+    h2: { fontSize: '2.7rem' },
+    h3: { fontSize: '2.24rem' },
+    h4: { fontSize: '2rem' },
+    h5: { fontSize: '1.5rem' },
+    h6: { fontSize: '1.25rem' },
+    subtitle1: {
+      opacity: '50%',
+      textTransform: 'uppercase',
+    },
+    subtitle2: { opacity: '50%' },
+  },
+})
diff --git a/.storybook/Theme/index.ts b/.storybook/Theme/index.ts
@@ -0,0 +1,3 @@
+export * from './xyo-website/index.ts'
+export * from './dataism/index.ts'
+export * from './xylabs/index.ts'
diff --git a/.storybook/Theme/xylabs/darkThemeOptions.tsx b/.storybook/Theme/xylabs/darkThemeOptions.tsx
@@ -0,0 +1,19 @@
+import {
+  alpha, lighten, type ThemeOptions,
+} from '@mui/material'
+
+export const darkThemeOptions: ThemeOptions = {
+  palette: {
+    background: {
+      default: '#0b0f30',
+      paper: '#101742',
+    },
+    mode: 'dark',
+    text: {
+      disabled: '#a5acdb',
+      primary: '#f7f8fc',
+      secondary: '#daddf2',
+    },
+  },
+}
+
diff --git a/.storybook/Theme/xylabs/index.ts b/.storybook/Theme/xylabs/index.ts
@@ -0,0 +1 @@
+export * from './theme'