Try it
Same pattern. Different context.
Change the brand or scheme to see the same Button use a different set of token values.
Preview only. The surrounding documentation keeps its own appearance.
Select a brand and scheme
Load the package styles described in Getting Started, then set the context on the root element:
<html data-brand="a" data-mode="light">
data-brand accepts a, b, or c. data-mode accepts light or dark.
Change either independently:
document.documentElement.dataset.brand = "b";
document.documentElement.dataset.mode = "dark";
The bundled brands are available contexts; adding another brand requires its own token definitions. Setting an arbitrary attribute value does not create a theme.
Customise a pattern
Use a documented pattern token to scope an override. For example:
.booking-action {
--uif-button-solid-container-background-default: var(--booking-action-background);
}
Define --booking-action-background in your application. Check the pattern's
token table for supported properties and set the related content and interaction
state tokens as needed. Check contrast in each brand and scheme you support.
Scale
Typography uses fluid values generated from Scale endpoints. It responds to
viewport size; there is no data-mode="min" or data-mode="max" switch.