Material UI is a popular React UI framework developed by Google. Helix, a part of the Backstage project, provides a Material UI theme and related utilities to create a consistent look and feel for Backstage applications. In this documentation, we will explore the key concepts and components of using Material UI with Helix.
Backstage Theme
The Backstage theme is a collection of configurations, interfaces, and utilities for creating and customizing Material UI themes. It includes various color palettes, typography styles, and predefined shapes.
Interfaces
BackstageTheme
A Backstage theme.
BackstageThemeOptions
Options for creating a new Backstage theme.
UnifiedTheme
A container of one theme for multiple different Material UI versions. Currently known keys are ‘v4’ and ‘v5’.
UnifiedThemeOptions
Options for creating a new UnifiedTheme.
UnifiedThemeProviderProps
Props for UnifiedThemeProvider().
Variables
colorVariants
The color range variants that are used in e.g. colorful bursts.
darkTheme
The old Material UI v4 Backstage dark theme.
defaultComponentThemes
A helper for creating theme overrides.
lightTheme
The old Material UI v4 Backstage light theme.
pageTheme
All of the builtin page themes.
palettes
Built-in Backstage color palettes.
shapes
The default predefined burst shapes.
themes
Built-in Backstage Material UI themes.
BackstagePaletteAdditions
Backstage-specific additions to the Material UI palette.
UnifiedThemeProvider
UnifiedThemeProvider() provides themes for all Material UI versions supported by the provided unified theme.
Customizing the Look-and-Feel of Your App
To customize the look-and-feel of your Backstage application, you can use the provided theme options and components.
Component Design Guidelines
Follow these guidelines when creating new components or contributing to existing ones in Backstage.
