Untitled

import { type Theme } from '@/store/useTheme';
import { PaletteOptions, ThemeOptions } from '@mui/material';

import { errorColor, goldenTangerine, metrisBlue, metrisGray, successColor, warningColor, sunflowerYellow, oceanicAzure } from './colors';

export interface MetrisThemeOptions extends ThemeOptions {
  palette: PaletteOptions;
  name: Theme;
}

export const metrisThemeOptions: MetrisThemeOptions[] = [
  {
    name: 'metris-light',
    palette: {
      mode: 'light',
      text: {
        primary: metrisGray[600],
        secondary: metrisGray[400],
        disabled: metrisGray[200],
      },
      primary: {
        main: metrisBlue[700],
        dark: metrisBlue[800],
        light: metrisBlue[400],
        contrastText: '#FFFFFF',
      },
      secondary: {
        main: goldenTangerine[200],
        dark: goldenTangerine[400],
        light: goldenTangerine[50],
        contrastText: '#FFFFFF',
      },
      error: {
        main: errorColor[500],
        dark: errorColor[700],
        light: errorColor[300],
        contrastText: '#FFFFFF',
      },
      warning: {
        main: warningColor[500],
        dark: warningColor[800],
        light: warningColor[300],
        contrastText: '#FFFFFF',
      },
      info: {
        main: metrisBlue[500],
        dark: metrisBlue[900],
        light: metrisBlue[200],
        contrastText: '#FFFFFF',
      },
      success: {
        main: successColor[500],
        dark: successColor[700],
        light: successColor[300],
        contrastText: '#FFFFFF',
      },
      action: {
        active: 'rgba(22, 27, 33, 0.56)',
        hover: 'rgba(22, 27, 33, 0.04)',
        selected: 'rgba(22, 27, 33, 0.08)',
        focus: 'rgba(22, 27, 33, 0.12)',
        disabled: 'rgba(22, 27, 33, 0.38)',
        disabledBackground: 'rgba(22, 27, 33, 0.12)',
      },
    },
    typography: {
      fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
      h1: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h2: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h3: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h4: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h5: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h6: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
      },
      body1: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      body2: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      subtitle1: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      subtitle2: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 400,
      },
      overline: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      caption: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
    },
    components: {
      MuiCssBaseline: {
        styleOverrides: `
            
          `,
      },
    },
  },
  {
    name: 'metris-dark',
    palette: {
      mode: 'dark',
      text: {
        primary: metrisGray[200],
        secondary: metrisGray[400],
        disabled: metrisGray[600],
      },
      primary: {
        main: metrisBlue[600],
        dark: metrisBlue[500],
        light: metrisBlue[50],
        contrastText: 'rgba(255, 255, 255, 0.87)',
      },
      secondary: {
        main: goldenTangerine[400],
        dark: goldenTangerine[600],
        light: goldenTangerine[400],
        contrastText: '#212121',
      },
      error: {
        main: errorColor[600],
        dark: errorColor[400],
        light: errorColor[300],
        contrastText: 'rgba(255, 255, 255, 0.87)',
      },
      warning: {
        main: warningColor[600],
        dark: warningColor[500],
        light: warningColor[300],
        contrastText: 'rgba(255, 255, 255, 0.87)',
      },
      info: {
        main: metrisBlue[700],
        dark: metrisBlue[600],
        light: metrisBlue[300],
        contrastText: 'rgba(0, 0, 0, 0.87)',
      },
      success: {
        main: successColor[600],
        dark: successColor[400],
        light: successColor[300],
        contrastText: 'rgba(255, 255, 255, 0.87)',
      },
      action: {
        active: 'rgba(248, 249, 250, 0.56)',
        hover: 'rgba(248, 249, 250, 0.08)',
        selected: 'rgba(248, 249, 250, 0.16)',
        focus: 'rgba(248, 249, 250, 0.12)',
        disabled: 'rgba(248, 249, 250, 0.64)',
        disabledBackground: 'rgba(248, 249, 250, 0.12)',
      },
    },
    typography: {
      fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
      h1: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h2: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h3: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h4: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h5: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      h6: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
      },
      body1: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      body2: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      subtitle1: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      subtitle2: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 400,
      },
      overline: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
      caption: {
        fontFamily: 'Gilroy, Helvetica, Arial, sans-serif',
        fontWeight: 500,
      },
    },
    components: {
      MuiCssBaseline: {
        styleOverrides: `
            
          `,
      },
    },
  },
];