The Global Theme Library

The global theme library can be found within the libs folder, see util-global-theme. The purpose of the library is to provide a default theme that can be used within any application within the repository.

The GlobalTheme Object

The GlobalTheme object is an extension of the MUI Theme object. Our theme object extends the following properties:

• defaultPalette: The customised palette object, with additional colour properties.
• typography: Custom Typography types. The default MUI typography types have been disabled.

Generating the GlobalTheme object

The createDefaultTheme function will create the theme required for use with our MUI Theme Provider.

The createDefaultTheme function takes two parameters:

• overrides?: GlobalThemeOverrides: Overrides available to set custom colours.
• highContrast = false: If set to true, the returned palette will use the default high contrast palette and custom colours will be ignored.

DefaultPalette

Accessing the custom palette

To access the theme palette, you must use theme.defaultPalette

When building components, we must use only the colours set within the global defaultPalette object.

The following files define the available colours, and the shape of the palette object: - colors: This file contains all default colour names and the associated HEX codes. - defaultPalette: This file contains the defaultPalette object using default colours. This theme allows for customisation of some colours. - highContrastPalette: This file contains the defaultPalette object using high contrast colours.

Build the colour palette

The correct colour palette is generated by getPalette.

Palette Overrides

This function accepts an optional parameter for overrides, this contains custom colour choices.

• If custom colours are provided it:
  • Calculates background colours for different interface parts using another function called getBackgroundColors.
  • Combines these custom colours with our default global palette.
  • Adjusts specific colours like text titles, masthead background, navigation background, footer background, secondary footer background, button colours, and action focus colours based on the provided overrides.
• If no custom colours are provided, it returns the default colour palette.

High Contrast Colors

This function accepts an optional parameter called useHighContrast (this is set to false by default).

If useHighContrast is true, all custom colours will be ignored and the default high contrast palette will be used.

Typography

The getTypography util function sets up the styles for the text (typography).

Using Typography

To utilise the defined Typography styles, all text content must be wrapped inside a MUI Typography component.

We must select the variant and where required the component to use, i.e.

<Typography variant='title6XL' component='h1' />

If no component is provided, the text will be displayed in a <span>

TypographyVariant

The util-global-theme library defines custom typography variants, and disables the default variants provided by MUI.

The available variants are:

title6XL, title5XL, title4XL, title3XL, title2XL, titleXL, titleL, titleM, titleS, bodyL, bodyM, bodyS, bodyXS, lableL, lableM, labelS

ShapeOptions

The shapeOptions object is used to define and customise the look of a component, for example a button, by setting rules for the corner radius and border.

Using Shape Options

To access border props, use theme.shapeOptions.borderWidth. - the available options are none, small, medium and large.

To access radius props, use theme.shapeOptions.radiusOptions. - the available options are none, small, medium, large and circle

Spacing

Spacing properties should be used for consistent spacing throughout application components and pages. Spacing is generated using the following function (factor: Spacing) => ${0.0625 * factor}rem'.