Inset multiplier

--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.

The wrapper publishes the shared inset rhythm. The accordion only consumes it.

Let a component scale itself from its container

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.

Publish the same inset rhythm to nested children

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.

Resize the preview to let the card resolve its own inset multiplier and keep nested components aligned.

Implementation snippets

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. 

[data-component="accordion"] {
    --inherit-inset-multiplier: var(--c-card--inset-multiplier);
}