Z-index

Z-index tokens in our design system are crucial for managing the stack order of elements that overlap each other in our web layouts. Each token corresponds to a specific z-index value, ensuring a structured and intuitive layering of elements, from background elements to pop-up modals and tooltips. These tokens help maintain consistency and predictability in the visual hierarchy of our interfaces.

Variable	Value
--ty-sys-z-index-deep	-1
--ty-sys-z-index-sticky	100
--ty-sys-z-index-nav	200
--ty-sys-z-index-backdrop	250
--ty-sys-z-index-drawer	300
--ty-sys-z-index-toast	400
--ty-sys-z-index-dropdown	500
--ty-sys-z-index-overlay	600
--ty-sys-z-index-modal	700
--ty-sys-z-index-popup	800