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.

<div style="--inherit-color-background: var(--color--primary); --inherit-color-contrast: var(--color--primary-contrast); --inherit-color-background-hover: var(--color--primary-border); --inherit-color-background-active: var(--color--primary-alt);">
    @button(['text' => 'Inherited default button', 'style' => 'filled', 'color' => 'default'])
    @endbutton

    @button([
        'text' => 'Explicit override wins',
                'description' => 'Field background color is resolved with an explicit CSS variable chain. Because the inherit hook is read on the rendered field surface, this example targets the field instance itself. 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.',
        'color' => 'default',
        'attributeList' => [
<style>
    .field-demo--inherited .c-field {
        --c-field--contrast-color: var(--color--secondary-contrast);
    }

    .field-demo--inherited .c-field__inner {
        --inherit-color-background: var(--color--secondary);
    }

    .field-demo--explicit .c-field {
        --c-field--contrast-color: var(--color--primary);
    }

    .field-demo--explicit .c-field__inner {
        --inherit-color-background: var(--color--secondary);
        --c-field--background-color: var(--color--primary-contrast);
    }
</style>

<div class="field-demo--inherited">
    @field([
        'label' => 'Inherited field background',
        'name' => 'inheritance-field-default',
        'type' => 'text',
        'placeholder' => 'Reads the inherited secondary background',
    ])
    @endfield
</div>

<div class="field-demo--explicit">
    @field([
        'label' => 'Explicit field override',
        'name' => 'inheritance-field-explicit',
        'type' => 'text',
        'placeholder' => 'Uses the explicit component background',
    ])
    @endfield
</div>
                'implementationLanguage' => 'scss',
            ],
            [
                'title' => 'Typography derived aliases',
                'description' => 'Typography variants such as lead text use derived aliases rather than direct token variables. The first example uses the inherited font size. The second sets the alias directly, which takes precedence.',
                'previewView' => 'pages.partials.concepts.inheritance.typography-preview',
                'bladeCode' => <<<'BLADE'
<div style="--inherit-font-size: var(--font-size-500);">
    <p class="c-typography__variant--lead">Inherited lead size from container</p>
    <p class="c-typography__variant--lead" style="--c-typography--font-size-lead: var(--font-size-200);">
        Explicit lead alias override
    </p>
</div>

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.

Inherited field background

Explicit field override

<div style="--inherit-color-background: var(--color--secondary); --c-field--contrast-color: var(--color--secondary-contrast);">
    @field([
        'label' => 'Inherited field background',
        'name' => 'inheritance-field-default',
        'type' => 'text',
        'placeholder' => 'Reads the inherited secondary background',
    ])
    @endfield
</div>

<div style="--inherit-color-background: var(--color--secondary); --c-field--background-color: var(--color--primary-contrast); --c-field--contrast-color: var(--color--primary);">
    @field([
        'label' => 'Explicit field override',
        'name' => 'inheritance-field-explicit',
        'type' => 'text',
        'placeholder' => 'Uses the explicit component background',
    ])
    @endfield
</div>

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'
);