Color
Modes UI provides palettes for UI, data and highlight colors. Some colors are still missing from the documentation here.
Color tokens are generally referenced using the --mo-color-{name}-{n} CSS custom property,
where {name} is the name of the palette and {n} is the numeric value of the
desired swatch. However, for status colors the naming is more semantic, i.e., instead of a number the swatch
{n} is the name of the status.
Primary UI color tokens (Default theme)
UI tokens give you a semantic way to reference colors in your app. The primary palette is the main contributor in theme coloring, while the secondary palette is generally is different shades/variations of the primary colors.
--mo-color-primary-{n}
--mo-color-secondary-{n}
You can try customizing the current primary UI color tokens and checking how they affect the components by using the color picker inside the token examples. Note that changes are local and will reset on refresh.
Neutral color palette
The neutral color palette provides a set of neutral colors that can be used in addition to the primary color
palette when you need a shade that is not included in the primary palette. For example some of them are used
on this documentation page as secondary-90 is too dark for certain uses, and
neutral-98 works better as a very subtle background.
--mo-color-neutral-{n}
--mo-color-neutral-{n}
The neutral palette is essentially an extension to the primary and secondary palette.
Custom themes
Custom themes use a different set of colors on top of the default ones, here is an example of the
Amethyst theme color set.
--mo-color-primary-{n}
--mo-color-primary-{n}
Typically the shade number e.g., -10, -20, refers to the lightness of the color. In dark mode this is inverted, as the components use the same shade number regardless of theme.
Brand color tokens
Brand color tokens are dictated by the Metso branding team, and should remain consistent across different themes and products.
--mo-color-brand-{n}
Status color tokens
Status colors should be used to indicate the outcome or current status of an operation. Warning and alert tokens should be chosen based on severity of issue.
The status colors now (since v2.7.0) include all the different shades, and certain shades are assigned to more specific, semantic tokens as shown below. The first primary variant is a prominent variant for situations where the status needs to be emphasized. And the on-primary token refers to the color that content inside/on the status indicator should be in.
The -container and -on-container variants should be used where the status does not need to be emphasized as much. Alerts should always be prominent, see the Alert & Toast for an example.
--mo-color-status-{n}
--mo-color-status-{n}
--mo-color-status-{n}
--mo-color-status-{n}
Data color tokens
The categorical data color palette helps the user distinguish between different categories of data. The order of colors should remain as shown, to maximize the contrast between neighboring colors.
--mo-color-data-{n}
Highlight color tokens
Highlight color tokens can be used in various situations to highlight certain content. Only use these when there is a clear need for them, the UI tokens are recommended in most cases.
--mo-color-highlight-{n}