Inheritance

Examples showing where inherit hooks participate in runtime styling, and how explicit component values now take precedence over inherited fallbacks.

Each example is split into tabs so you can inspect the live preview, the Blade usage, and the implementation pattern that resolves the precedence.

Resolution order

  • 1. Check whether the component instance sets its own custom property such as `--c-button--*`, `--c-field--*`, or a derived alias like `--c-typography--font-size-lead`.
  • 2. If no explicit component value exists, consume the matching `--inherit-*` variable from the surrounding context.
  • 3. If neither exists, fall back to the token-backed `-default` variable or token helper result.

Live examples

Button token inheritance

The container publishes inherit hooks for surface and contrast. The first button consumes those values. The second button sets explicit component variables, so its customization wins over the inherited values.

Accordion content scales nested titles

The accordion content area can publish compressed typography variables on the built-in type scale, so dense content panels keep nested headings between the body-size floor and the accordion label scale without using a separate multiplier or cap.

No correction

No correction

This is a h1 title inside accordion content

This is a h2 title inside accordion content

This is a h3 title inside accordion content

This is a h4 title inside accordion content

This is a h5 title inside accordion content
This is a h6 title inside accordion content

This panel resets the accordion typography variables to their default title sizes, so nested headings keep their uncorrected scale.

Corrected

Corrected

This is a h1 title inside accordion content

This is a h2 title inside accordion content

This is a h3 title inside accordion content

This is a h4 title inside accordion content

This is a h5 title inside accordion content
This is a h6 title inside accordion content

This panel uses the accordion defaults, which publish a compressed heading scale on the built-in type scale.

Field explicit-var-first chain

Field background color is resolved with an explicit CSS variable chain. In this example the inherited case uses the secondary color, while the second field keeps the same inherited context but overrides the component background with a different value.

Implementation patterns

Use the helper that matches the type of value you are resolving. Direct token-backed component variables use token helpers, derived aliases use the alias helper, and non-token runtime variables can keep an explicit CSS fallback chain. 

background-color: tokens.getRawValue(
    $prefix: $_,
    $token: 'color--surface',
    $inheritVariable: 'color-background'
);