@mui/material 7.0.0-beta.0 → 7.0.0-beta.2

package/modern/styles/createPalette.d.ts

@@ -0,0 +1,125 @@
+export type PaletteMode = 'light' | 'dark';
+export interface Color {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  A100: string;
+  A200: string;
+  A400: string;
+  A700: string;
+}
+export {};
+// use standalone interface over typeof colors/commons
+// to enable module augmentation
+export interface CommonColors {
+  black: string;
+  white: string;
+}
+export type ColorPartial = Partial<Color>;
+export interface TypeText {
+  primary: string;
+  secondary: string;
+  disabled: string;
+}
+export interface TypeAction {
+  active: string;
+  hover: string;
+  hoverOpacity: number;
+  selected: string;
+  selectedOpacity: number;
+  disabled: string;
+  disabledOpacity: number;
+  disabledBackground: string;
+  focus: string;
+  focusOpacity: number;
+  activatedOpacity: number;
+}
+export interface TypeBackground {
+  default: string;
+  paper: string;
+}
+export type TypeDivider = string;
+export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
+export interface SimplePaletteColorOptions {
+  light?: string;
+  main: string;
+  dark?: string;
+  contrastText?: string;
+}
+export interface PaletteColor {
+  light: string;
+  main: string;
+  dark: string;
+  contrastText: string;
+}
+export interface TypeObject {
+  text: TypeText;
+  action: TypeAction;
+  divider: TypeDivider;
+  background: TypeBackground;
+}
+export type PaletteTonalOffset = number | {
+  light: number;
+  dark: number;
+};
+export const light: TypeObject;
+export const dark: TypeObject;
+export interface PaletteAugmentColorOptions {
+  color: PaletteColorOptions;
+  mainShade?: number | string;
+  lightShade?: number | string;
+  darkShade?: number | string;
+  name?: number | string;
+}
+export interface Palette {
+  common: CommonColors;
+  mode: PaletteMode;
+  contrastThreshold: number;
+  tonalOffset: PaletteTonalOffset;
+  primary: PaletteColor;
+  secondary: PaletteColor;
+  error: PaletteColor;
+  warning: PaletteColor;
+  info: PaletteColor;
+  success: PaletteColor;
+  grey: Color;
+  text: TypeText;
+  divider: TypeDivider;
+  action: TypeAction;
+  background: TypeBackground;
+  getContrastText: (background: string) => string;
+  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
+}
+export interface Channels {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+  contrastTextChannel: string;
+}
+export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
+export interface PaletteOptions {
+  primary?: PaletteColorOptions;
+  secondary?: PaletteColorOptions;
+  error?: PaletteColorOptions;
+  warning?: PaletteColorOptions;
+  info?: PaletteColorOptions;
+  success?: PaletteColorOptions;
+  mode?: PaletteMode;
+  tonalOffset?: PaletteTonalOffset;
+  contrastThreshold?: number;
+  common?: Partial<CommonColors>;
+  grey?: ColorPartial;
+  text?: Partial<TypeText>;
+  divider?: string;
+  action?: Partial<TypeAction>;
+  background?: Partial<TypeBackground>;
+  getContrastText?: (background: string) => string;
+}
+export default function createPalette(palette: PaletteOptions): Palette;

package/modern/styles/createStyles.d.ts

@@ -0,0 +1 @@
+export default function createStyles(styles: any): never;

package/modern/styles/createTheme.d.ts

@@ -0,0 +1,14 @@
+import { CssVarsThemeOptions } from "./createThemeWithVars.js";
+import { Theme, ThemeOptions } from "./createThemeNoVars.js";
+export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
+  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
+},
+// cast type to skip module augmentation test
+...args: object[]): Theme;

package/modern/styles/createThemeNoVars.d.ts

@@ -0,0 +1,70 @@
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme, SxProps, CSSObject, SxConfig } from '@mui/system';
+import { Mixins, MixinsOptions } from "./createMixins.js";
+import { Palette, PaletteOptions } from "./createPalette.js";
+import { Typography, TypographyOptions } from "./createTypography.js";
+import { Shadows } from "./shadows.js";
+import { Transitions, TransitionsOptions } from "./createTransitions.js";
+import { ZIndex, ZIndexOptions } from "./zIndex.js";
+import { Components } from "./components.js";
+import { CssVarsTheme, CssVarsPalette, ColorSystemOptions } from "./createThemeWithVars.js";
+
+/**
+ * To disable custom properties, use module augmentation
+ *
+ * @example
+ * declare module '@mui/material/styles' {
+ *   interface CssThemeVariables {
+ *     enabled: true;
+ *   }
+ * }
+ */
+export interface CssThemeVariables {}
+type CssVarsOptions = CssThemeVariables extends {
+  enabled: true;
+} ? ColorSystemOptions : {};
+export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {
+  mixins?: MixinsOptions;
+  components?: Components<Omit<Theme, 'components'>>;
+  palette?: PaletteOptions;
+  shadows?: Shadows;
+  transitions?: TransitionsOptions;
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+  unstable_sxConfig?: SxConfig;
+}
+export interface BaseTheme extends SystemTheme {
+  mixins: Mixins;
+  palette: Palette & (CssThemeVariables extends {
+    enabled: true;
+  } ? CssVarsPalette : {});
+  shadows: Shadows;
+  transitions: Transitions;
+  typography: Typography;
+  zIndex: ZIndex;
+  unstable_strictMode?: boolean;
+}
+
+// shut off automatic exporting for the `BaseTheme` above
+export {};
+type CssVarsProperties = CssThemeVariables extends {
+  enabled: true;
+} ? Pick<CssVarsTheme, 'applyStyles' | 'colorSchemes' | 'colorSchemeSelector' | 'rootSelector' | 'cssVarPrefix' | 'defaultColorScheme' | 'getCssVar' | 'getColorSchemeSelector' | 'generateThemeVars' | 'generateStyleSheets' | 'generateSpacing' | 'shouldSkipGeneratingVar' | 'vars'> : {};
+
+/**
+ * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ */
+export interface Theme extends BaseTheme, CssVarsProperties {
+  cssVariables?: false;
+  components?: Components<BaseTheme>;
+  unstable_sx: (props: SxProps<Theme>) => CSSObject;
+  unstable_sxConfig: SxConfig;
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createThemeNoVars(options?: ThemeOptions, ...args: object[]): Theme;

package/modern/styles/createThemeWithVars.d.ts

@@ -0,0 +1,350 @@
+import { OverridableStringUnion } from '@mui/types';
+import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
+import { ExtractTypographyTokens } from '@mui/system/cssVars';
+import { ThemeOptions, Theme } from "./createThemeNoVars.js";
+import { Palette, PaletteOptions } from "./createPalette.js";
+import { Shadows } from "./shadows.js";
+import { ZIndex } from "./zIndex.js";
+import { Components } from "./components.js";
+
+/**
+ * default MD color-schemes
+ */
+export type DefaultColorScheme = 'light' | 'dark';
+
+/**
+ * The application can add more color-scheme by extending this interface via module augmentation
+ *
+ * Ex.
+ * declare module @mui/material/styles {
+ *   interface ColorSchemeOverrides {
+ *     foo: true;
+ *   }
+ * }
+ *
+ * // SupportedColorScheme = 'light' | 'dark' | 'foo';
+ */
+export interface ColorSchemeOverrides {}
+export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
+
+/**
+ * All color-schemes that the application has
+ */
+export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
+export interface Opacity {
+  inputPlaceholder: number;
+  inputUnderline: number;
+  switchTrackDisabled: number;
+  switchTrack: number;
+}
+export type Overlays = [string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined, string | undefined];
+export interface PaletteBackgroundChannel {
+  defaultChannel: string;
+  paperChannel: string;
+}
+export interface PaletteCommonChannel {
+  background: string;
+  backgroundChannel: string;
+  onBackground: string;
+  onBackgroundChannel: string;
+}
+export interface PaletteColorChannel {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+  contrastTextChannel: string;
+}
+export interface PaletteActionChannel {
+  activeChannel: string;
+  selectedChannel: string;
+}
+export interface PaletteTextChannel {
+  primaryChannel: string;
+  secondaryChannel: string;
+}
+export interface PaletteAlert {
+  errorColor: string;
+  infoColor: string;
+  successColor: string;
+  warningColor: string;
+  errorFilledBg: string;
+  infoFilledBg: string;
+  successFilledBg: string;
+  warningFilledBg: string;
+  errorFilledColor: string;
+  infoFilledColor: string;
+  successFilledColor: string;
+  warningFilledColor: string;
+  errorStandardBg: string;
+  infoStandardBg: string;
+  successStandardBg: string;
+  warningStandardBg: string;
+  errorIconColor: string;
+  infoIconColor: string;
+  successIconColor: string;
+  warningIconColor: string;
+}
+export interface PaletteAppBar {
+  defaultBg: string;
+  darkBg: string;
+  darkColor: string;
+}
+export interface PaletteAvatar {
+  defaultBg: string;
+}
+export interface PaletteButton {
+  inheritContainedBg: string;
+  inheritContainedHoverBg: string;
+}
+export interface PaletteChip {
+  defaultBorder: string;
+  defaultAvatarColor: string;
+  defaultIconColor: string;
+}
+export interface PaletteFilledInput {
+  bg: string;
+  hoverBg: string;
+  disabledBg: string;
+}
+export interface PaletteLinearProgress {
+  primaryBg: string;
+  secondaryBg: string;
+  errorBg: string;
+  infoBg: string;
+  successBg: string;
+  warningBg: string;
+}
+export interface PaletteSkeleton {
+  bg: string;
+}
+export interface PaletteSlider {
+  primaryTrack: string;
+  secondaryTrack: string;
+  errorTrack: string;
+  infoTrack: string;
+  successTrack: string;
+  warningTrack: string;
+}
+export interface PaletteSnackbarContent {
+  bg: string;
+  color: string;
+}
+export interface PaletteSpeedDialAction {
+  fabHoverBg: string;
+}
+export interface PaletteStepConnector {
+  border: string;
+}
+export interface PaletteStepContent {
+  border: string;
+}
+export interface PaletteSwitch {
+  defaultColor: string;
+  defaultDisabledColor: string;
+  primaryDisabledColor: string;
+  secondaryDisabledColor: string;
+  errorDisabledColor: string;
+  infoDisabledColor: string;
+  successDisabledColor: string;
+  warningDisabledColor: string;
+}
+export interface PaletteTableCell {
+  border: string;
+}
+export interface PaletteTooltip {
+  bg: string;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystemOptions {
+  palette?: PaletteOptions & {
+    background?: Partial<PaletteBackgroundChannel>;
+    common?: Partial<PaletteCommonChannel>;
+    primary?: Partial<PaletteColorChannel>;
+    secondary?: Partial<PaletteColorChannel>;
+    error?: Partial<PaletteColorChannel>;
+    info?: Partial<PaletteColorChannel>;
+    success?: Partial<PaletteColorChannel>;
+    text?: Partial<PaletteTextChannel>;
+    dividerChannel?: Partial<string>;
+    action?: Partial<PaletteActionChannel>;
+    Alert?: Partial<PaletteAlert>;
+    AppBar?: Partial<PaletteAppBar>;
+    Avatar?: Partial<PaletteAvatar>;
+    Button?: Partial<PaletteButton>;
+    Chip?: Partial<PaletteChip>;
+    FilledInput?: Partial<PaletteFilledInput>;
+    LinearProgress?: Partial<PaletteLinearProgress>;
+    Skeleton?: Partial<PaletteSkeleton>;
+    Slider?: Partial<PaletteSlider>;
+    SnackbarContent?: Partial<PaletteSnackbarContent>;
+    SpeedDialAction?: Partial<PaletteSpeedDialAction>;
+    StepConnector?: Partial<PaletteStepConnector>;
+    StepContent?: Partial<PaletteStepContent>;
+    Switch?: Partial<PaletteSwitch>;
+    TableCell?: Partial<PaletteTableCell>;
+    Tooltip?: Partial<PaletteTooltip>;
+  };
+  opacity?: Partial<Opacity>;
+  overlays?: Overlays;
+}
+export interface CssVarsPalette {
+  common: PaletteCommonChannel;
+  primary: PaletteColorChannel;
+  secondary: PaletteColorChannel;
+  error: PaletteColorChannel;
+  info: PaletteColorChannel;
+  success: PaletteColorChannel;
+  warning: PaletteColorChannel;
+  text: PaletteTextChannel;
+  background: PaletteBackgroundChannel;
+  dividerChannel: string;
+  action: PaletteActionChannel;
+  Alert: PaletteAlert;
+  AppBar: PaletteAppBar;
+  Avatar: PaletteAvatar;
+  Button: PaletteButton;
+  Chip: PaletteChip;
+  FilledInput: PaletteFilledInput;
+  LinearProgress: PaletteLinearProgress;
+  Skeleton: PaletteSkeleton;
+  Slider: PaletteSlider;
+  SnackbarContent: PaletteSnackbarContent;
+  SpeedDialAction: PaletteSpeedDialAction;
+  StepConnector: PaletteStepConnector;
+  StepContent: PaletteStepContent;
+  Switch: PaletteSwitch;
+  TableCell: PaletteTableCell;
+  Tooltip: PaletteTooltip;
+}
+export interface ColorSystem {
+  palette: Palette & CssVarsPalette;
+  opacity: Opacity;
+  overlays: Overlays;
+}
+export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  /**
+   * @default 'light'
+   */
+  defaultColorScheme?: SupportedColorScheme;
+  /**
+   * Prefix of the generated CSS variables
+   * @default 'mui'
+   */
+  cssVarPrefix?: string;
+  /**
+   * Theme components
+   */
+  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
+  /**
+   * Color schemes configuration
+   */
+  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> & (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
+  /**
+   * The strategy to generate CSS variables
+   *
+   * @example 'media'
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+   *
+   * @example '.mode-%s'
+   * Generate CSS variables within a class .mode-light, .mode-dark
+   *
+   * @example '[data-mode-%s]'
+   * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
+   */
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  /**
+   * The selector to generate the global CSS variables (non-color-scheme related)
+   * @default ':root'
+   * @example ':host' // (for shadow DOM)
+   * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
+   */
+  rootSelector?: string;
+  /**
+   * If `true`, the CSS color-scheme will not be set.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * @default false
+   */
+  disableCssColorScheme?: boolean;
+  /**
+   * A function to determine if the key, value should be attached as CSS Variable
+   * `keys` is an array that represents the object path keys.
+   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+   *  then, keys = ['foo', 'bar']
+   *        value = 'var(--test)'
+   */
+  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+}
+
+// should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
+export interface ThemeVars {
+  font: ExtractTypographyTokens<Theme['typography']>;
+  palette: Omit<ColorSystem['palette'], 'colorScheme' | 'mode' | 'contrastThreshold' | 'tonalOffset' | 'getContrastText' | 'augmentColor'>;
+  opacity: Opacity;
+  overlays: Overlays;
+  shadows: Shadows;
+  shape: Theme['shape'];
+  spacing: string;
+  zIndex: ZIndex;
+}
+type Split<T, K extends keyof T = keyof T> = K extends string | number ? { [k in K]: Exclude<T[K], undefined> } : never;
+type ConcatDeep<T> = T extends Record<string | number, infer V> ? keyof T extends string | number ? V extends string | number ? keyof T : keyof V extends string | number ? `${keyof T}-${ConcatDeep<Split<V>>}` : never : never : never;
+
+/**
+ * Does not work for these cases:
+ * - { borderRadius: string | number } // the value can't be a union
+ * - { shadows: [string, string, ..., string] } // the value can't be an array
+ */
+type NormalizeVars<T> = ConcatDeep<Split<T>>;
+
+// shut off automatic exporting for the Generics above
+export {};
+export interface ThemeCssVarOverrides {}
+export type ThemeCssVar = OverridableStringUnion<NormalizeVars<Omit<ThemeVars, 'overlays' | 'shadows' | 'shape'>> | 'shape-borderRadius' | 'shadows-0' | 'shadows-1' | 'shadows-2' | 'shadows-3' | 'shadows-4' | 'shadows-5' | 'shadows-6' | 'shadows-7' | 'shadows-8' | 'shadows-9' | 'shadows-10' | 'shadows-11' | 'shadows-12' | 'shadows-13' | 'shadows-14' | 'shadows-15' | 'shadows-16' | 'shadows-17' | 'shadows-18' | 'shadows-19' | 'shadows-20' | 'shadows-21' | 'shadows-22' | 'shadows-23' | 'shadows-24' | 'overlays-0' | 'overlays-1' | 'overlays-2' | 'overlays-3' | 'overlays-4' | 'overlays-5' | 'overlays-6' | 'overlays-7' | 'overlays-8' | 'overlays-9' | 'overlays-10' | 'overlays-11' | 'overlays-12' | 'overlays-13' | 'overlays-14' | 'overlays-15' | 'overlays-16' | 'overlays-17' | 'overlays-18' | 'overlays-19' | 'overlays-20' | 'overlays-21' | 'overlays-22' | 'overlays-23' | 'overlays-24', ThemeCssVarOverrides>;
+
+/**
+ * Theme properties generated by extendTheme and CssVarsProvider
+ */
+export interface CssVarsTheme extends ColorSystem {
+  colorSchemes: Partial<Record<SupportedColorScheme, ColorSystem>>;
+  rootSelector: string;
+  colorSchemeSelector: 'media' | 'class' | 'data' | string;
+  cssVarPrefix: string;
+  defaultColorScheme: SupportedColorScheme;
+  vars: ThemeVars;
+  getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
+  getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Array<Record<string, any>>;
+  generateSpacing: () => Theme['spacing'];
+
+  // Default theme tokens
+  spacing: Theme['spacing'];
+  breakpoints: Theme['breakpoints'];
+  shape: Theme['shape'];
+  typography: Theme['typography'];
+  transitions: Theme['transitions'];
+  shadows: Theme['shadows'];
+  mixins: Theme['mixins'];
+  zIndex: Theme['zIndex'];
+  direction: Theme['direction'];
+  /**
+   * A function to determine if the key, value should be attached as CSS Variable
+   * `keys` is an array that represents the object path keys.
+   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+   *  then, keys = ['foo', 'bar']
+   *        value = 'var(--test)'
+   */
+  shouldSkipGeneratingVar: (keys: string[], value: string | number) => boolean;
+  unstable_sxConfig: SxConfig;
+  unstable_sx: (props: SxProps<CssVarsTheme>) => CSSObject;
+  applyStyles: ApplyStyles<SupportedColorScheme>;
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createThemeWithVars(options?: CssVarsThemeOptions, ...args: object[]): Omit<Theme, 'applyStyles'> & CssVarsTheme;

package/modern/styles/createTransitions.d.ts

@@ -0,0 +1,51 @@
+export interface Easing {
+  easeInOut: string;
+  easeOut: string;
+  easeIn: string;
+  sharp: string;
+}
+export const easing: Easing;
+export interface Duration {
+  shortest: number;
+  shorter: number;
+  short: number;
+  standard: number;
+  complex: number;
+  enteringScreen: number;
+  leavingScreen: number;
+}
+export const duration: Duration;
+export interface TransitionsOptions {
+  easing?: Partial<Easing>;
+  duration?: Partial<Duration>;
+  create?: (props: string | string[], options?: Partial<{
+    duration: number | string;
+    easing: string;
+    delay: number | string;
+  }>) => string;
+  getAutoHeightDuration?: (height: number) => number;
+}
+
+/**
+ * @internal
+ * @param props
+ * @param options
+ */
+export function create(props: string | string[], options?: Partial<{
+  duration: number | string;
+  easing: string;
+  delay: number | string;
+}>): string;
+
+/**
+ * @internal
+ * @param height
+ */
+export function getAutoHeightDuration(height: number): number;
+export interface Transitions {
+  easing: Easing;
+  duration: Duration;
+  create: typeof create;
+  getAutoHeightDuration: typeof getAutoHeightDuration;
+}
+export default function createTransitions(inputTransitions: TransitionsOptions): Transitions;

package/modern/styles/createTypography.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as CSS from 'csstype';
+import { Palette } from "./createPalette.js";
+export type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
+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;
+}
+export type NormalCssProperties = CSS.Properties<number | string>;
+export type Fontface = CSS.AtRule.FontFace & {
+  fallbacks?: CSS.AtRule.FontFace[];
+};
+
+/**
+ * Allows the user to augment the properties available
+ */
+export interface BaseCSSProperties extends NormalCssProperties {
+  '@font-face'?: Fontface | Fontface[];
+}
+export interface CSSProperties extends BaseCSSProperties {
+  // Allow pseudo selectors and media queries
+  // `unknown` is used since TS does not allow assigning an interface without
+  // an index signature to one with an index signature. This is to allow type safe
+  // module augmentation.
+  // Technically we want any key not typed in `BaseCSSProperties` to be of type
+  // `CSSProperties` but this doesn't work. The index signature needs to cover
+  // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
+  // but this would not allow assigning React.CSSProperties to CSSProperties
+  [k: string]: unknown | CSSProperties;
+}
+export interface FontStyleOptions extends Partial<FontStyle> {
+  allVariants?: React.CSSProperties;
+}
+
+// TODO: which one should actually be allowed to be subject to module augmentation?
+// current type vs interface decision is kept for historical reasons until we
+// made a decision
+export type TypographyStyle = CSSProperties;
+export interface TypographyStyleOptions extends TypographyStyle {}
+export interface TypographyUtils {
+  pxToRem: (px: number) => string;
+}
+export interface Typography extends Record<Variant, TypographyStyle>, FontStyle, TypographyUtils {}
+export interface TypographyOptions extends Partial<Record<Variant, TypographyStyleOptions> & FontStyleOptions> {}
+export default function createTypography(palette: Palette, typography: TypographyOptions | ((palette: Palette) => TypographyOptions)): Typography;

package/modern/styles/cssUtils.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from "./createTypography.js";
+export function isUnitless(value: string): boolean;
+export function getUnit(input: string): string;
+export function toUnitless(value: string): number;
+export function convertLength(baseFontSize: string): (length: string, toUnit: string) => string;
+export interface AlignPropertyParams {
+  size: number;
+  grid: number;
+}
+export function alignProperty(params: AlignPropertyParams): number;
+export interface FontGridParams {
+  lineHeight: number;
+  pixels: number;
+  htmlFontSize: number;
+}
+export function fontGrid(params: FontGridParams): number;
+export interface ResponsivePropertyParams {
+  cssProperty: string;
+  min: number;
+  max: number;
+  unit?: string;
+  breakpoints?: number[];
+  transform?: (value: number) => number;
+}
+export function responsiveProperty(params: ResponsivePropertyParams): CSSProperties;