Tokens

How they are made

• Colors by role: --redz-text, -muted, -faint; --redz-bg-page, --redz-bg, -raised, -hover; a tone, its -subtle fill and its -contrast text for primary, secondary, success, danger, warning and info. --redz-focus and --redz-link are the primary tone unless a theme gives them their own - a white-label palette sets the links' color in --redz-link alone.
• Text is at least 4.5:1 on its background, the borders of fields and the focus ring 3:1, in the light and the dark theme - computed in OKLCH and written as checked hex.
• A component declares a few properties of its own on its root and never on rows or items: hundreds of properties on small elements slow every style recalculation.

A white label from one colour

data-brand on html, or on one region, makes the primary tone of one colour, --redz-brand: the library derives the tone, its -subtle fill, its -contrast text - black or white by the colour's lightness - the focus ring and the links, in both themes; in the dark one the tone is lightened until it reads on the dark ground. data-brand="#0a7f5a" gives the colour, which the library sets through the CSSOM after its script loads; a page that knows the colour on its server writes --redz-brand in its own stylesheet beside the attribute, and nothing waits for the script. The colour is used as given: one with 4.5:1 on white keeps the light theme's text readable - the library does not fix another. The relative colours it is derived with are on the floor: Chrome 119, Firefox 128, Safari 18.

<div class="hstack flex-wrap gap-8" data-brand="#0a7f5a">
	<button class="btn btn-primary" type="button">Book now</button>
	<button class="btn btn-outline-primary" type="button">Details</button>
	<span class="badge badge-subtle-primary">New</span>
	<a href="#tokens-brand">A link</a>
</div>
<div class="hstack flex-wrap gap-8" data-brand="#f4c542">
	<button class="btn btn-primary" type="button">Book now</button>
</div>

Every token, light theme

From Bootstrap 5.3