--inherit-inset-multiplier is the shared runtime hook for spacing that should grow with context. It lets a parent surface, a container query, or both decide how large inset padding and spacing should feel without hard-coding larger values in every nested component.
Why we use it
Keeps nested surfaces on the same spacing rhythm when a parent grows or shrinks.
Lets container-aware components increase inset spacing without rewriting each padding rule at every breakpoint.
Preserves token-based formulas, so only the multiplier changes while the spacing recipe stays consistent.
Keep the public hook generic: parents publish `--inherit-inset-multiplier`, and each component resolves that into its own local `--c-*-inset-multiplier` variable before calculating padding and gaps.
Short implementation model
1. Publish a public value from the parent or wrapper with `--inherit-inset-multiplier`.
2. Resolve that value inside the component to a local variable such as `--c-table--inset-multiplier` or `--c-accordion--inset-multiplier`.
3. Calculate padding, gaps, and related spacing from the local multiplier instead of duplicating larger token values.
4. If the component is container-aware, combine the inherited value with a local scale using `max(...)` so it never shrinks below its context.
Examples
Consume the inherited value directly
Use the inherited multiplier when a component only needs to follow the spacing rhythm decided by its parent. The accordion reads the public hook and turns it into its own local inset padding variables.
Inherited section spacing
This accordion uses the parent inset multiplier to grow its horizontal and vertical padding.
Same component, larger inset
Only the public inherit variable changes. The component keeps its own spacing formulas.
The wrapper publishes the shared inset rhythm. The accordion only consumes it.
<div style="--inherit-inset-multiplier: 1.5; max-width: 32rem; margin-inline: auto;">
@accordion([
'list' => [
[
'heading' => 'Inherited section spacing',
'content' => 'This accordion uses the parent inset multiplier to grow its horizontal and vertical padding.',
],
[
'heading' => 'Same component, larger inset',
'content' => 'Only the public inherit variable changes. The component keeps its own spacing formulas.',
],
]
])
@endaccordion
</div>
Use a local scale when the component should respond to its own available width. The table keeps inherited spacing when it exists, but can still increase its inset at larger container sizes.
Inset-aware table
Service
Owner
Status
Updated
Cards
UX team
Stable
Today
Tables
Platform
Pilot
Yesterday
Forms
Core
Stable
Today
Resize the preview to see the table raise its own local inset scale from the container query.
Use the public inherit variable when a parent component should keep nested components aligned with its own container-aware spacing. The card publishes its resolved multiplier so the nested accordion follows the same inset rhythm.
Nested child inherits card inset
The child keeps the same spacing rhythm as the card body.
One public hook, many consumers
The parent does not need to rewrite the child padding formula. It only publishes the multiplier.
Resize the preview to let the card resolve its own inset multiplier and keep nested components aligned.
@card([
'heading' => 'Inset-aware card',
'content' => 'Resize the preview to let the card grow its own inset multiplier and pass that spacing on to the nested accordion.',
])
@accordion([
'list' => [
[
'heading' => 'Nested child inherits card inset',
'content' => 'The child keeps the same spacing rhythm as the card body.',
],
],
])
@endaccordion
@endcard
These are the three recurring patterns: publish the public hook, consume it into a local component variable, and combine it with a container-aware scale when the component also adapts to its own width.
