threed-garden/src/lib/types/mui-theme.d.ts

ThreeD Garden: WebGL 3D Environment Interface for Next.JS React TypeScript Three.JS React-Three Physics, 2D Paper.JS; APIs: Apollo GraphQL, WordPress; CSS: Tailwind, Radix-UI; Libraries: FarmBot 3D; AI: OpenAI, DeepSeek

// ** Material UI (MUI) Imports

// ** Extend MUI Theme (Module Augmentation)
import { Theme } from '@mui/material/styles'
// in the file where you are creating the theme (invoking the function `createTheme()`)
// import type { Theme, ThreedTheme OR Theme as ThreedTheme } from '@mui/threed/styles'

declare module '@mui/material/styles' {
// declare module '@mui/threed/styles' {

  // interface ThreedTheme extends MuiTheme {}
  // interface MuiTheme {
  // interface ThreedTheme extends Theme {
  interface Theme {
    palette?: Palette
    boxShadows?: {
      xs: string
      sm: string
      md: string
      lg: string
      xl: string
      xxl: string
      inset: string
      colored: {
        primary: string
        secondary: string
        info: string
        success: string
        warning: string
        error: string
        light: string
        dark: string
      }
      navbarBoxShadow: string
      sliderBoxShadow: {
        thumb: string
      }
      tabsBoxShadow: {
        indicator: string
      }
    }
    borders?: {
      borderColor: string
      borderWidth: {
        [key: number | string]: number | string
      }
      borderRadius: {
        [key: number | string]: number | string
      }
    }
    transitions?: any
    functions?: any
    size?: any
  }

  // interface ThreedThemeOptions extends ThemeOptions {
  interface ThemeOptions {
  // interface MuiThemeOptions {
    boxShadows?: {
      xs: string
      sm: string
      md: string
      lg: string
      xl: string
      xxl: string
      inset: string
      colored: {
        primary: string
        secondary: string
        info: string
        success: string
        warning: string
        error: string
        light: string
        dark: string
      }
      navbarBoxShadow: string
      sliderBoxShadow: {
        thumb: string
      }
      tabsBoxShadow: {
        indicator: string
      }
    }
    borders?: {
      borderColor: string
      borderWidth: {
        [key: number | string]: number | string
      }
      borderRadius: {
        [key: number | string]: number | string
      }
    }
    functions?: any
    shadows?: any
  }

  // interface ThreedPalette extends Palette {
  interface Palette {
    background:
      | {
          default: string
          sidenav: string
          card: string
        }
      | any
    white:
      | {
          main: string
          focus: string
        }
      | any
    text:
      | {
          main: string
          focus: string
          primary: string
          secondary: string
          disabled: string
        }
      | any
    transparent:
      | {
          main: string
        }
      | any
    black:
      | {
          light: string
          main: string
          focus: string
        }
      | any
    primary: ColorsTypes | any
    secondary: ColorsTypes | any
    info: ColorsTypes | any
    success: ColorsTypes | any
    warning: ColorsTypes | any
    error: ColorsTypes | any
    light: ColorsTypes | any
    dark: ColorsTypes | any
    grey:
      | {
          [key: string | number]: string
        }
      | any
    gradients:
      | {
          primary: GradientsTypes
          secondary: GradientsTypes
          info: GradientsTypes
          success: GradientsTypes
          warning: GradientsTypes
          error: GradientsTypes
          light: GradientsTypes
          dark: GradientsTypes
        }
      | any
    socialMediaColors:
      | {
          facebook: SocialMediaColorsTypes
          twitter: SocialMediaColorsTypes
          instagram: SocialMediaColorsTypes
          linkedin: SocialMediaColorsTypes
          pinterest: SocialMediaColorsTypes
          youtube: SocialMediaColorsTypes
          vimeo: SocialMediaColorsTypes
          slack: SocialMediaColorsTypes
          dribbble: SocialMediaColorsTypes
          github: SocialMediaColorsTypes
          reddit: SocialMediaColorsTypes
          tumblr: SocialMediaColorsTypes
        }
      | any
    badgeColors:
      | {
          primary: BadgeColorsTypes
          secondary: BadgeColorsTypes
          info: BadgeColorsTypes
          success: BadgeColorsTypes
          warning: BadgeColorsTypes
          error: BadgeColorsTypes
          light: BadgeColorsTypes
          dark: BadgeColorsTypes
        }
      | any
    coloredShadows:
      | {
          [key: string]: string
        }
      | any
    inputBorderColor: string
    tabs:
      | {
          indicator:
            | {
                boxShadow: string
              }
            | any
        }
      | any
  }

  // interface ThreedPalette extends Palette {
  interface Palette {
    background:
      | {
          default: string
          sidenav: string
          card: string
        }
      | any
    white:
      | {
          main: string
          focus: string
        }
      | any
    text:
      | {
          main: string
          focus: string
          primary: string
          secondary: string
          disabled: string
        }
      | any
    transparent:
      | {
          main: string
        }
      | any
    black:
      | {
          light: string
          main: string
          focus: string
        }
      | any
    primary: ColorsTypes | any
    secondary: ColorsTypes | any
    info: ColorsTypes | any
    success: ColorsTypes | any
    warning: ColorsTypes | any
    error: ColorsTypes | any
    light: ColorsTypes | any
    dark: ColorsTypes | any
    grey:
      | {
          [key: string | number]: string
        }
      | any
    gradients:
      | {
          primary: GradientsTypes
          secondary: GradientsTypes
          info: GradientsTypes
          success: GradientsTypes
          warning: GradientsTypes
          error: GradientsTypes
          light: GradientsTypes
          dark: GradientsTypes
        }
      | any
    socialMediaColors:
      | {
          facebook: SocialMediaColorsTypes
          twitter: SocialMediaColorsTypes
          instagram: SocialMediaColorsTypes
          linkedin: SocialMediaColorsTypes
          pinterest: SocialMediaColorsTypes
          youtube: SocialMediaColorsTypes
          vimeo: SocialMediaColorsTypes
          slack: SocialMediaColorsTypes
          dribbble: SocialMediaColorsTypes
          github: SocialMediaColorsTypes
          reddit: SocialMediaColorsTypes
          tumblr: SocialMediaColorsTypes
        }
      | any
    badgeColors:
      | {
          primary: BadgeColorsTypes
          secondary: BadgeColorsTypes
          info: BadgeColorsTypes
          success: BadgeColorsTypes
          warning: BadgeColorsTypes
          error: BadgeColorsTypes
          light: BadgeColorsTypes
          dark: BadgeColorsTypes
        }
      | any
    coloredShadows:
      | {
          [key: string]: string
        }
      | any
    inputBorderColor: string
    tabs:
      | {
          indicator:
            | {
                boxShadow: string
              }
            | any
        }
      | any
  }

  // interface ThreedTypographyVariants extends TypographyVariants {
  interface TypographyVariants {
    fontFamily: string
    fontWeightLighter: number
    fontWeightLight: number
    fontWeightRegular: number
    fontWeightMedium: number
    fontWeightBold: number
    h1: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      color: string
      lineHeight: number
    }
    h2: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      color: string
      lineHeight: number
    }
    h3: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      color: string
      lineHeight: number
    }
    h4: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      color: string
      lineHeight: number
    }
    h5: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      color: string
      lineHeight: number
    }
    h6: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      color: string
      lineHeight: number
    }
    subtitle1: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      lineHeight: number
    }
    subtitle2: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      lineHeight: number
    }
    body1: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      lineHeight: number
    }
    body2: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      lineHeight: number
    }
    button: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      lineHeight: number
      textTransform: any
    }
    caption: {
      fontFamily: string
      fontSize: string
      fontWeight: number
      lineHeight: number
    }
    overline: {
      fontFamily: string
    }
    d1: DisplayTypes
    d2: DisplayTypes
    d3: DisplayTypes
    d4: DisplayTypes
    d5: DisplayTypes
    d6: DisplayTypes
    size: {
      xxs: string
      xs: string
      sm: string
      md: string
      lg: string
      xl: string
      '2xl': string
      '3xl': string
    }
    lineHeight: {
      sm: number
      md: number
      lg: number
    }
  }
}

interface ColorsTypes {
  main: string
  focus: string
}

interface GradientsTypes {
  main: string
  state: string
}

interface SocialMediaColorsTypes {
  main: string
  dark: string
}

interface BadgeColorsTypes {
  background: string
  text: string
}

interface DisplayTypes {
  fontFamily: string
  color: string
  fontWeight: number
  lineHeight: number
  fontSize: string
}