Arwes LogotypeArwes Logotext

Palette

The theme palette provides a collection of common color settings for the UI.

There are some predefined basic and elevation colors. By default, they are setup with predefined color values, but these values are not intended to be used in production, but rather configured according to the project needs, since they do not follow a proper visual guideline.

Basic Colors

The palette is composed by the following basic colors:

  • primary - Primary interface component elements.
  • secondary - Complementary color.
  • success - Successful messages. It should tend to be green.
  • info - Information messages. It should tend to be blue.
  • warn - Warning messages. It should tend to be orange.
  • error - Error messages. It should tend to be red.

Each color has the following variations:

  • main - The main color.
  • dark - A darker version of the main color.
  • light - A lighter version of the main color.
  • contrast - The contrast color of the main color.

If the variations are not configured, they are calculated. The basic colors use the following settings to calculate the color variations:

  • tonalOffset - The color tone variation. It is used to calculate dark and light variations. From 0 to 1, by default 0.2. The higher the number, the stronger the effect.
  • contrastOffset - The color tone contrast variation. From 0 to 1, by default 0.45. The higher the number, the stronger the contrast effect.

An example of configuring the primary color with all its variations so no calculations are made:

tsx
const theme = createTheme({
palette: {
primary: {
main: '#0ff',
dark: '#099',
light: '#6ff',
contrast: '#001919'
}
}
});

An example of configuring the secondary color with only the main color variation, leaving the remaining variations to be calculated with custom tone offsets:

tsx
const theme = createTheme({
palette: {
tonalOffset: 0.15,
primary: {
main: '#0ff'
}
}
});

The resulting theme palette will have all the color variations and it can be accessed like:

tsx
theme.palette.primary.main; // '#0ff'

Elevation Colors

There are some colors used as levels or elevations to delimit and prioritize surfaces. The elevation effect is basically a color which becomes lighter or darker progressively for different surfaces according to the color luminosity.

The palette is composed by the following elevation effect colors:

  • neutral - For general surface and containers backgrounds.

The neutral color does not have variations automatically generated, but rather they are calculated when requested.

The following settings are used to calculate the elevation of the color:

  • elevationOffset - The tone offset to darken or lighten according to the color luminosity. It goes from 0 to 1, by default 0.025.

An example of defining the neutral color:

tsx
const theme = createTheme({
palette: {
elevationOffset: 0.025,
neutral: {
main: '#111'
}
}
});

Then the color elevation can be calculated based on a multiplier number of the tone offset:

tsx
// Since it is a "dark" color, it is lighten.
theme.palette.neutral.elevate(0); // '#111' (The unchanged color)
theme.palette.neutral.elevate(1); // '#171717'
theme.palette.neutral.elevate(2); // '#1e1e1e'
theme.palette.neutral.elevate(3); // '#242424'

Extra Settings

The palette can be setup with any extra color settings with no enforced structure as needed.