# UX4G Tokens — Z-index This page lists every primitive and semantic token for the **Z-index** family. - Primitive token source: `src/tokens/z-index.tokens.css` - Semantic token source: `src/semantic/z-index.semantic.css` ## Primitive tokens ```css :root { --ux4g-z-n1: -1; --ux4g-z-0: 0; --ux4g-z-1: 1; --ux4g-z-2: 2; --ux4g-z-3: 3; --ux4g-z-index-dropdown: 1000; --ux4g-z-index-sticky: 1020; --ux4g-z-index-fixed: 1030; --ux4g-z-index-offcanvas: 1040; --ux4g-z-index-modal-backdrop: 1050; --ux4g-z-index-modal: 1060; --ux4g-z-index-popover: 1070; --ux4g-z-index-tooltip: 1080; --ux4g-z-index-toast: 1090; } ``` ## Semantic tokens ```css :root { --ux4g-z-layout-base: var(--ux4g-z-0); --ux4g-z-layout-raised: var(--ux4g-z-1); --ux4g-z-layout-overlay: var(--ux4g-z-2); --ux4g-z-layout-top: var(--ux4g-z-3); /* Components */ --ux4g-z-dropdown: var(--ux4g-z-index-dropdown); --ux4g-z-sticky: var(--ux4g-z-index-sticky); --ux4g-z-fixed: var(--ux4g-z-index-fixed); --ux4g-z-offcanvas: var(--ux4g-z-index-offcanvas); --ux4g-z-modal-backdrop: var(--ux4g-z-index-modal-backdrop); --ux4g-z-modal: var(--ux4g-z-index-modal); --ux4g-z-popover: var(--ux4g-z-index-popover); --ux4g-z-tooltip: var(--ux4g-z-index-tooltip); --ux4g-z-toast: var(--ux4g-z-index-toast); } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.