pantoken / stacking

stacking

Beta

@pantoken/plugin-stacking — named z-index depths.

InstUI's View exposes a stacking scale (deepest, below, above, topmost) so layers stack predictably instead of by hand-tuned magic numbers. This plugin surfaces that scale two ways: it emits --instui-stacking-<level> tokens (resolved to concrete z-index values from the shipped --instui-component-view-stacking-* tokens), and a matching set of .instui-stack-<level> utility classes.

Both hooks are defined, so the consumer chooses the layer: add it to buildTokens to bake the --instui-stacking-* records into every output, or to toCss (the css hook self-defines them, so the .instui-stack-* classes stand alone).

Example

import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";
import { stacking } from "@pantoken/plugin-stacking";

const css = toCss(byTheme("rebrand"), { plugins: [stacking()] });
// :root { --instui-stacking-topmost: … } + .instui-stack-topmost { z-index: … }

Interfaces

• StackingOptions

Variables

• STACKING_LEVELS
• STACKING_RULES

Functions

• stackingRootCss
• stacking

References

default

Renames and re-exports stacking