Layering
A layering scale with a step of fifty. The step is the point: between two neighbouring layers there is room for someone else’s widget, a consent banner or a chat bubble that has to sit between them — and no need to renumber anything.
- The scale lives on the document root, not on a subtree: overlay panels teleport into
bodyand never see a subtree’s variables. One scale per document is a property, not a limitation.
Layering: z-index scale
| Token | Value |
|---|---|
--gr-z-bottom-nav--gr-z-bottom-nav | 850 |
--gr-z-navbar--gr-z-navbar | 900 |
--gr-z-dropdown--gr-z-dropdown | 1000 |
--gr-z-tooltip--gr-z-tooltip | 1050 |
--gr-z-modal--gr-z-modal | 1100 |
--gr-z-loading--gr-z-loading | 1150 |
--gr-z-toast--gr-z-toast | 1200 |
Role descriptions ship with the package in Russian and are not shown here yet. Translating them is a decision of its own — see ADR-0003.
Source: @feugene/granularity 0.41.0, tokens/*.json