Token reference
Public semantic CSS variables for building custom Luke UI elements.
vars is Luke UI's typed public token contract. Each path resolves to a stable --luke-* CSS
variable. For example, vars.color.intent.danger.surface.solidHover resolves to
var(--luke-color-intent-danger-surface-solid-hover).
Use these variables when a component API or layout utility cannot express a custom element. They adapt to the active identity and colour mode. Generated palette values, component selectors, and other implementation details are not part of the public styling API.
Use semantic variables
Choose tokens by purpose. A card might use surface.floating, radius.surface, and
depth.resting. A warning message might use the warning intent's subtle surface and text. Avoid
carrying resolved colour values into application CSS.
Tokens
This table is generated from the public TypeScript declaration and JSDoc, so it stays aligned with the code that produces each theme.
Prop
Type
Next steps
Read Colour for the semantic colour model. Read Authoring a theme to generate the complete contract for a product-owned identity.