From f0bdeb860ab783dad7da74c080040385b0f99e72 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sat, 27 Dec 2025 18:53:08 +0000 Subject: [PATCH] chore: split theme type declarations --- .../nextjs/src/theme/types/components.d.ts | 71 ++++++ frontends/nextjs/src/theme/types/layout.d.ts | 70 ++++++ frontends/nextjs/src/theme/types/palette.d.ts | 38 ++++ frontends/nextjs/src/theme/types/theme.d.ts | 202 +----------------- 4 files changed, 185 insertions(+), 196 deletions(-) create mode 100644 frontends/nextjs/src/theme/types/components.d.ts create mode 100644 frontends/nextjs/src/theme/types/layout.d.ts create mode 100644 frontends/nextjs/src/theme/types/palette.d.ts diff --git a/frontends/nextjs/src/theme/types/components.d.ts b/frontends/nextjs/src/theme/types/components.d.ts new file mode 100644 index 000000000..b3c850088 --- /dev/null +++ b/frontends/nextjs/src/theme/types/components.d.ts @@ -0,0 +1,71 @@ +import '@mui/material/styles' +import '@mui/material/Typography' +import '@mui/material/Button' +import '@mui/material/Chip' +import '@mui/material/IconButton' +import '@mui/material/Badge' +import '@mui/material/Alert' + +// Typography variants and component overrides +declare module '@mui/material/styles' { + interface TypographyVariants { + code: React.CSSProperties + kbd: React.CSSProperties + label: React.CSSProperties + } + + interface TypographyVariantsOptions { + code?: React.CSSProperties + kbd?: React.CSSProperties + label?: React.CSSProperties + } +} + +declare module '@mui/material/Typography' { + interface TypographyPropsVariantOverrides { + code: true + kbd: true + label: true + } +} + +declare module '@mui/material/Button' { + interface ButtonPropsVariantOverrides { + soft: true + ghost: true + } + + interface ButtonPropsColorOverrides { + neutral: true + } +} + +declare module '@mui/material/Chip' { + interface ChipPropsVariantOverrides { + soft: true + } + + interface ChipPropsColorOverrides { + neutral: true + } +} + +declare module '@mui/material/IconButton' { + interface IconButtonPropsColorOverrides { + neutral: true + } +} + +declare module '@mui/material/Badge' { + interface BadgePropsColorOverrides { + neutral: true + } +} + +declare module '@mui/material/Alert' { + interface AlertPropsVariantOverrides { + soft: true + } +} + +export {} diff --git a/frontends/nextjs/src/theme/types/layout.d.ts b/frontends/nextjs/src/theme/types/layout.d.ts new file mode 100644 index 000000000..6c9219bfc --- /dev/null +++ b/frontends/nextjs/src/theme/types/layout.d.ts @@ -0,0 +1,70 @@ +import '@mui/material/styles' + +// Custom theme properties for layout and design tokens +declare module '@mui/material/styles' { + interface Theme { + custom: { + fonts: { + body: string + heading: string + mono: string + } + borderRadius: { + none: number + sm: number + md: number + lg: number + xl: number + full: number + } + contentWidth: { + sm: string + md: string + lg: string + xl: string + full: string + } + sidebar: { + width: number + collapsedWidth: number + } + header: { + height: number + } + } + } + + interface ThemeOptions { + custom?: { + fonts?: { + body?: string + heading?: string + mono?: string + } + borderRadius?: { + none?: number + sm?: number + md?: number + lg?: number + xl?: number + full?: number + } + contentWidth?: { + sm?: string + md?: string + lg?: string + xl?: string + full?: string + } + sidebar?: { + width?: number + collapsedWidth?: number + } + header?: { + height?: number + } + } + } +} + +export {} diff --git a/frontends/nextjs/src/theme/types/palette.d.ts b/frontends/nextjs/src/theme/types/palette.d.ts new file mode 100644 index 000000000..edf25b4a1 --- /dev/null +++ b/frontends/nextjs/src/theme/types/palette.d.ts @@ -0,0 +1,38 @@ +import '@mui/material/styles' + +// Extend palette with custom neutral colors +declare module '@mui/material/styles' { + interface Palette { + neutral: { + 50: string + 100: string + 200: string + 300: string + 400: string + 500: string + 600: string + 700: string + 800: string + 900: string + 950: string + } + } + + interface PaletteOptions { + neutral?: { + 50?: string + 100?: string + 200?: string + 300?: string + 400?: string + 500?: string + 600?: string + 700?: string + 800?: string + 900?: string + 950?: string + } + } +} + +export {} diff --git a/frontends/nextjs/src/theme/types/theme.d.ts b/frontends/nextjs/src/theme/types/theme.d.ts index a8623d1fb..e3a795dd5 100644 --- a/frontends/nextjs/src/theme/types/theme.d.ts +++ b/frontends/nextjs/src/theme/types/theme.d.ts @@ -1,200 +1,10 @@ /** * MUI Theme Type Extensions - * - * This file extends Material-UI's theme interface with custom properties. - * All custom design tokens and component variants should be declared here. + * + * This file aggregates the theme augmentation modules to keep the + * main declaration lightweight while still exposing all custom tokens. */ -import '@mui/material/styles' -import '@mui/material/Typography' -import '@mui/material/Button' - -// ============================================================================ -// Custom Palette Extensions -// ============================================================================ - -declare module '@mui/material/styles' { - // Extend palette with custom neutral colors - interface Palette { - neutral: { - 50: string - 100: string - 200: string - 300: string - 400: string - 500: string - 600: string - 700: string - 800: string - 900: string - 950: string - } - } - - interface PaletteOptions { - neutral?: { - 50?: string - 100?: string - 200?: string - 300?: string - 400?: string - 500?: string - 600?: string - 700?: string - 800?: string - 900?: string - 950?: string - } - } - - // Custom typography variants - interface TypographyVariants { - code: React.CSSProperties - kbd: React.CSSProperties - label: React.CSSProperties - } - - interface TypographyVariantsOptions { - code?: React.CSSProperties - kbd?: React.CSSProperties - label?: React.CSSProperties - } - - // Custom theme properties - interface Theme { - custom: { - fonts: { - body: string - heading: string - mono: string - } - borderRadius: { - none: number - sm: number - md: number - lg: number - xl: number - full: number - } - contentWidth: { - sm: string - md: string - lg: string - xl: string - full: string - } - sidebar: { - width: number - collapsedWidth: number - } - header: { - height: number - } - } - } - - interface ThemeOptions { - custom?: { - fonts?: { - body?: string - heading?: string - mono?: string - } - borderRadius?: { - none?: number - sm?: number - md?: number - lg?: number - xl?: number - full?: number - } - contentWidth?: { - sm?: string - md?: string - lg?: string - xl?: string - full?: string - } - sidebar?: { - width?: number - collapsedWidth?: number - } - header?: { - height?: number - } - } - } -} - -// ============================================================================ -// Typography Variant Mapping -// ============================================================================ - -declare module '@mui/material/Typography' { - interface TypographyPropsVariantOverrides { - code: true - kbd: true - label: true - } -} - -// ============================================================================ -// Button Variants & Colors -// ============================================================================ - -declare module '@mui/material/Button' { - interface ButtonPropsVariantOverrides { - soft: true - ghost: true - } - - interface ButtonPropsColorOverrides { - neutral: true - } -} - -// ============================================================================ -// Chip Variants -// ============================================================================ - -declare module '@mui/material/Chip' { - interface ChipPropsVariantOverrides { - soft: true - } - - interface ChipPropsColorOverrides { - neutral: true - } -} - -// ============================================================================ -// IconButton Colors -// ============================================================================ - -declare module '@mui/material/IconButton' { - interface IconButtonPropsColorOverrides { - neutral: true - } -} - -// ============================================================================ -// Badge Colors -// ============================================================================ - -declare module '@mui/material/Badge' { - interface BadgePropsColorOverrides { - neutral: true - } -} - -// ============================================================================ -// Alert Variants -// ============================================================================ - -declare module '@mui/material/Alert' { - interface AlertPropsVariantOverrides { - soft: true - } -} - -export {} +export * from './palette' +export * from './layout' +export * from './components'