[Typography] Add `fontWeightSemiBold` to Typography's FontStyle interface

Summary

Summary

Currently, MUI's createTheme typography options don't include fontWeightSemiBold in the FontStyle interface, requiring manual type declaration overrides to use semibold font weights in themes.

Problem

When I try to use fontWeightSemibold in my custom theme, TypeScript throws an error because it's not defined in the FontStyle interface. This means I have to manually extend the interface with module declaration, which feels unnecessary for such a common font weight.

Current Workaround

I currently have to add this module declaration to make it work:

declare module '@mui/material/styles' {
  interface TypographyVariants {
    fontWeightSemibold: React.CSSProperties['fontWeight'];
  }

  interface TypographyVariantsOptions {
    fontWeightSemibold?: React.CSSProperties['fontWeight'];
  }
}

Proposed Solution

Add fontWeightSemiBold to the FontStyle interface in createTypography.d.ts.

Current interface:

export interface FontStyle {
  fontFamily: React.CSSProperties['fontFamily'];
  fontSize: number;
  fontWeightLight: React.CSSProperties['fontWeight'];
  fontWeightRegular: React.CSSProperties['fontWeight'];
  fontWeightMedium: React.CSSProperties['fontWeight'];
  fontWeightBold: React.CSSProperties['fontWeight'];
  htmlFontSize: number;
}

Proposed interface:

export interface FontStyle {
  fontFamily: React.CSSProperties['fontFamily'];
  fontSize: number;
  fontWeightLight: React.CSSProperties['fontWeight'];
  fontWeightRegular: React.CSSProperties['fontWeight'];
  fontWeightMedium: React.CSSProperties['fontWeight'];
  fontWeightSemibold: React.CSSProperties['fontWeight'];
  fontWeightBold: React.CSSProperties['fontWeight'];
  htmlFontSize: number;
}

Benefits

• Would eliminate the need for manual module declaration overrides or using sx to override fontweight 600
• Provides consistency with other font weight options
• Would improve the developer experience with better TypeScript support

Environment

• MUI version: 7.1.2
• TypeScript version: 5.8.2

Examples

It's happen when I try to use theme.typography.fontWeightSemibold from theme object but here's what I see from accessing theme.typography.fontWeight...

Motivation

No response

Search keywords: fontweightsemibold

Start with packages/mui-material/src/styles/createTypography.d.ts at the FontStyle interface referenced in the issue. Confirm how the existing font-weight options are typed, add the requested semibold option consistently, and verify that theme.typography.fontWeightSemibold is accepted by TypeScript.