Z Index Tokens
[0, 10, 100, 1000, 1100, 1200, 1300, 9999]
$ aoe install @community/value-z-index-tokensProjection
Always in _index.xml · the agent never has to ask for this.
z-index-scale [value] v1.0.0
Loaded when retrieval picks the atom as adjacent / supporting.
z-index-scale [value] v1.0.0
Constant
[0, 10, 100, 1000, 1100, 1200, 1300, 9999]
Type
z-index-token-set
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
/* Design tokens (CSS custom properties) */
:root {
--z-base: 0;
--z-raised: 10; /* slightly elevated content (sticky headers) */
--z-dropdown: 100; /* select menus, navigation flyouts */
--z-overlay: 1000; /* dark backdrop behind modal */
--z-modal: 1100; /* modal/dialog content */
--z-popover: 1200; /* popovers anchored to triggers */
--z-toast: 1300; /* notifications above everything */
--z-debug: 9999; /* devtools-only overlays */
}
/* Component usage */
.modal-backdrop { z-index: var(--z-overlay); }
.modal-dialog { z-index: var(--z-modal); }
.toast { z-index: var(--z-toast); }
.tooltip { z-index: var(--z-popover); }
Layers
- Base:
- Value: 0
- Purpose: default flow content
- Raised:
- Value: 10
- Purpose: sticky headers, raised cards
- Dropdown:
- Value: 100
- Purpose: select menus, nav flyouts, autocomplete lists
- Overlay:
- Value: 1000
- Purpose: dimmed backdrops behind modals
- Modal:
- Value: 1100
- Purpose: modal/dialog surfaces
- Popover:
- Value: 1200
- Purpose: popovers, anchored cards (ABOVE modals when triggered from modal)
- Toast:
- Value: 1300
- Purpose: transient notifications, snackbars
- Debug:
- Value: 9999
- Purpose: devtools, debug overlays — never in production UI
Loaded when retrieval picks the atom as a focal / direct hit.
z-index-scale [value] v1.0.0
Constant
[0, 10, 100, 1000, 1100, 1200, 1300, 9999]
Type
z-index-token-set
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
/* Design tokens (CSS custom properties) */
:root {
--z-base: 0;
--z-raised: 10; /* slightly elevated content (sticky headers) */
--z-dropdown: 100; /* select menus, navigation flyouts */
--z-overlay: 1000; /* dark backdrop behind modal */
--z-modal: 1100; /* modal/dialog content */
--z-popover: 1200; /* popovers anchored to triggers */
--z-toast: 1300; /* notifications above everything */
--z-debug: 9999; /* devtools-only overlays */
}
/* Component usage */
.modal-backdrop { z-index: var(--z-overlay); }
.modal-dialog { z-index: var(--z-modal); }
.toast { z-index: var(--z-toast); }
.tooltip { z-index: var(--z-popover); }
Layers
- Base:
- Value: 0
- Purpose: default flow content
- Raised:
- Value: 10
- Purpose: sticky headers, raised cards
- Dropdown:
- Value: 100
- Purpose: select menus, nav flyouts, autocomplete lists
- Overlay:
- Value: 1000
- Purpose: dimmed backdrops behind modals
- Modal:
- Value: 1100
- Purpose: modal/dialog surfaces
- Popover:
- Value: 1200
- Purpose: popovers, anchored cards (ABOVE modals when triggered from modal)
- Toast:
- Value: 1300
- Purpose: transient notifications, snackbars
- Debug:
- Value: 9999
- Purpose: devtools, debug overlays — never in production UI
Relations
related: [@community/term-z-index-stacking-context, @community/collection-accessible-modal, @community/type-color-token-shape, @community/anti-pattern-magic-numbers]
Rationale
Hardcoded z-index: 9999 is a recurring anti-pattern that breaks composability — every component author guesses higher than the last, leading to z-index inflation. A documented, named scale assigns each stacking layer a deliberate value. Components consume the token, not the literal. The exponential gap between tiers (10 → 100 → 1000) leaves room for future intermediate layers without renumbering.
Constant
[0, 10, 100, 1000, 1100, 1200, 1300, 9999]
Type
z-index-token-set
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
/* Design tokens (CSS custom properties) */
:root {
--z-base: 0;
--z-raised: 10; /* slightly elevated content (sticky headers) */
--z-dropdown: 100; /* select menus, navigation flyouts */
--z-overlay: 1000; /* dark backdrop behind modal */
--z-modal: 1100; /* modal/dialog content */
--z-popover: 1200; /* popovers anchored to triggers */
--z-toast: 1300; /* notifications above everything */
--z-debug: 9999; /* devtools-only overlays */
}
/* Component usage */
.modal-backdrop { z-index: var(--z-overlay); }
.modal-dialog { z-index: var(--z-modal); }
.toast { z-index: var(--z-toast); }
.tooltip { z-index: var(--z-popover); }
Layers
- Base:
- Value: 0
- Purpose: default flow content
- Raised:
- Value: 10
- Purpose: sticky headers, raised cards
- Dropdown:
- Value: 100
- Purpose: select menus, nav flyouts, autocomplete lists
- Overlay:
- Value: 1000
- Purpose: dimmed backdrops behind modals
- Modal:
- Value: 1100
- Purpose: modal/dialog surfaces
- Popover:
- Value: 1200
- Purpose: popovers, anchored cards (ABOVE modals when triggered from modal)
- Toast:
- Value: 1300
- Purpose: transient notifications, snackbars
- Debug:
- Value: 9999
- Purpose: devtools, debug overlays — never in production UI
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/value-z-index-tokens/atom.yaml