Themes
Colour styles (also known as tokens) are colour values that work for both Light and Dark themes, and additional themes that may be developed later (e.g. High Contrast). These act as a single source of truth to serve a variety of design use cases.
Below is our list of colour styles, expressed as variables (in Figma) and tokens (in code theme.json). The variables below are separated into two distinct groups:
- Generic - colour that a commonly found and used throughout the portal interface
- Semantic - component specific colour sets tailored to suit a component and its usage
Generic Tokens
Text
Icons
Border
Background
Semantic Tokens
Semantic theme tokens are mapped to our UI components and composition. If you have questions regarding semantic tokens please contact the team at Frontend Foundations Team.