Theme

A collection of token-value pairs curated together to produce a cohesive presentational style for the properties of a user interface.

The token-value pairs are typically constructed as semantic-primitive among other possible pairings. In a simplified theme, the semantic tokens are meant to be assigned to the appropriate properties within the user interface. While the primitive tokens are not meant to appear in the interface at all; strictly used for informing the values for the semantic tokens. Other tiers of tokens can appear in a theme for other aliasing purposes.

Example

input.bdColor = color.grey.500
input.bgColor = color.white
input.fgColor = color.black
input.critical.bdColor = color.red.500
input.critical.bgColor = color.white
input.critical.fgColor = color.red.500

In a user interface, the semantic tokens would be assigned to elements. One way to do this is using CSS for HTML elements:

input {
    border-color: var(--input-bdColor)
    background-color: var(--input-bgColor);
    color: var(--input-fgColor);
}

input:invalid {
    border-color: var(--input-critical-bdColor)
    background-color: var(--input-critical-bgColor);
    color: var(--input-critical-fgColor);
}

Note that the construction of the earlier tokens change to CSS custom properties to be valid for use in CSS. Finally, a representation of the theme is applied to the page which includes the element and the above CSS.

:root {
    --input-bdColor: #ccc;
    --input-bgColor: white;
    --input-fgColor: black;
    --input-critical-bdColor: #F44336;
    --input-critical-bgColor: white;
    --input-critical-fgColor: #F44336
}

In this example, the primitive tokens have had their values resolved to their permanent values since these tokens are not meant to be exposed within the user interface.