Function getDesignTokens

Build the MUI design tokens (palette, typography, shape, shadows) for a mode.

Light and dark palettes share the ramps but override specific slots in dark mode. Also sets shadows[1] (the "baseShadow") per mode. The returned object is spread into createTheme by AppTheme.

  • getDesignTokens(
        mode: PaletteMode,
    ): {
        palette: {
            action: { hover: string; selected: string };
            background: { default: string; paper: string };
            divider: string;
            error: { dark: string; light: string; main: string };
            flows: {
                inflows: { primary: string; surface: string; text: string };
                outflows: { primary: string; surface: string; text: string };
            };
            grey: {
                "100": string;
                "200": string;
                "300": string;
                "400": string;
                "50": string;
                "500": string;
                "600": string;
                "700": string;
                "750": string;
                "800": string;
                "850": string;
                "900": string;
            };
            info: { contrastText: string; dark: string; light: string; main: string };
            mode: PaletteMode;
            primary: {
                contrastText: string;
                dark: string;
                light: string;
                main: string;
            };
            success: { dark: string; light: string; main: string };
            text: { primary: string; secondary: string; warning: string };
            warning: { dark: string; light: string; main: string };
        };
        shadows: Shadows;
        shape: { borderRadius: number };
        typography: {
            body1: { fontSize: string };
            body2: { fontSize: string; fontWeight: number };
            caption: { fontSize: string; fontWeight: number };
            fontFamily: string;
            h1: {
                fontSize: string;
                fontWeight: number;
                letterSpacing: number;
                lineHeight: number;
            };
            h2: { fontSize: string; fontWeight: number; lineHeight: number };
            h3: { fontSize: string; lineHeight: number };
            h4: { fontSize: string; fontWeight: number; lineHeight: number };
            h5: { fontSize: string; fontWeight: number };
            h6: { fontSize: string; fontWeight: number };
            subtitle1: { fontSize: string };
            subtitle2: { fontSize: string; fontWeight: number };
        };
    }

    Parameters

    • mode: PaletteMode

      "light" or "dark".

    Returns {
        palette: {
            action: { hover: string; selected: string };
            background: { default: string; paper: string };
            divider: string;
            error: { dark: string; light: string; main: string };
            flows: {
                inflows: { primary: string; surface: string; text: string };
                outflows: { primary: string; surface: string; text: string };
            };
            grey: {
                "100": string;
                "200": string;
                "300": string;
                "400": string;
                "50": string;
                "500": string;
                "600": string;
                "700": string;
                "750": string;
                "800": string;
                "850": string;
                "900": string;
            };
            info: { contrastText: string; dark: string; light: string; main: string };
            mode: PaletteMode;
            primary: {
                contrastText: string;
                dark: string;
                light: string;
                main: string;
            };
            success: { dark: string; light: string; main: string };
            text: { primary: string; secondary: string; warning: string };
            warning: { dark: string; light: string; main: string };
        };
        shadows: Shadows;
        shape: { borderRadius: number };
        typography: {
            body1: { fontSize: string };
            body2: { fontSize: string; fontWeight: number };
            caption: { fontSize: string; fontWeight: number };
            fontFamily: string;
            h1: {
                fontSize: string;
                fontWeight: number;
                letterSpacing: number;
                lineHeight: number;
            };
            h2: { fontSize: string; fontWeight: number; lineHeight: number };
            h3: { fontSize: string; lineHeight: number };
            h4: { fontSize: string; fontWeight: number; lineHeight: number };
            h5: { fontSize: string; fontWeight: number };
            h6: { fontSize: string; fontWeight: number };
            subtitle1: { fontSize: string };
            subtitle2: { fontSize: string; fontWeight: number };
        };
    }

    A MUI ThemeOptions-shaped object (palette, typography, shape, shadows).

Settings

Member Visibility