Skip to main content

Allium theme

Introducing themes​

Themes are one of the most important ingredients in the UDS system-of-systems. The theme is loosely similar to a brand palette in that it leverages design tokens to codify design decisions, but it is much more powerful and sophisticated. The theme is another abstracted layer that sits between the brand palettes and the components, making it possible to re-use those components in a variety of different contexts. i.e. different brands or different expressions of a brand.

Allium theme​

Allium Design System comes bundled with a theme that has been designed to evolve the TELUS brand. Design decisions have been focused around the specific context of a marketing and e-commerce website experience.

A lot of design effort has gone into making this theme a unique reflection of the brand. It is a theme which is used by many product teams and therefore has strict governance processes to maintain high levels of quality and change management. Changes to this theme will be managed by the Allium brand team in partnership with the DPA and with the support of the UDS team. More information on this topic can be found in Allium governance and contribution.

Future theming​

There is currently only one Allium theme. Further themes to support specific business contexts are being actively investigated. If you are building with Allium and have a use case for which the current theme is not a good fit, please get in touch to discuss your requirements.

Enabling reuse and iteration​

UDS has been designed to accommodate any number of themes to meet any given criteria in the future. Making it possible, and relatively cheap, to create themes that support different types of UI. For example: dark mode, internal dashboard applications, temporary promotional websites, or maybe even a dedicated experience for a TV interface.

Themes also enable iteration and experimentation. Themes enable designers to tweak design token values without needing to edit code. As such designers can continuously iterate on designs independently of developers. On a larger scale this could be used to drive an entire brand refresh without needing to rebuild the whole design system, helping to future-proof Allium as the TELUS brand continues to evolve.

Anatomy of a theme​

A theme is a detailed design specification document that uses a strict format to define the following three things:

  • Appearances. Define the component states (e.g. hover, focus, pressed, inactive) and component variants (e.g. primary, secondary, warning) of a given component. They are the things that need to be accounted for.

  • Tokens. Are the codified design decisions which map values from the brand palette to the specific properties of the component in it’s default state (e.g. the fontSize should be size16, or the outerBorderColor should be transparent).

  • Rules. Are used to define any exceptions from the default state. This is where we specify when alternative tokens are to be used. Rules take the form of simple if statements, making them easy for humans to read and understand (e.g. if focus = true then set the outerBorderColor to greenAccessible). Note: every property defined in Rules, first needs to have its default value set in Tokens.

Editing and creating themes​

Refer to the UDS documentation for detailed information on editing and creating themes.

Theme options​

Sometimes you may need to provide some additional parameters to the ThemeProvider to specify how the theme is supposed to be handled. In order to do that, one can use themeOptions prop to specify the options. Currently, the following theme options are available:

  • forceAbsoluteFontSize is a flag indicating whether text-related components have to use absolute font sizing (in pixels) instead of relative font sizing (in rem units).