Layers

Sistema de capas

Nuestro sistema de capas (z-index) se basa en tokens asociados a objetos o componentes. Actualmente, distinguimos dos tipos de capas: posición absoluta y posición contextual o relativa.

Posicionamiento absoluto

Utilizamos la posición absoluta para diferenciar objetos o componentes que deben situarse por encima del flujo principal. Estos elementos con z-index absoluto siempre tienen posicionamiento absoluto, lo que significa que poseen propiedades de posición fixed o absolute.

Token	Valor
$layer-header	900
$layer-modal	1000
$layer-dropdown	1100
$layer-dialog	1200
$layer-toast	1300
$layer-popover	1400
$layer-tooltip	1500
$layer-fullscreen	1600
$layer-tothemoon	10000

layer-header

layer-modal

layer-dropdown

layer-dialog

layer-toast

layer-popover

layer-tooltip

layer-fullscreen

Tenemos una cantidad limitada de capas, ya que hay un orden lógico de superposición. Cuando hay componentes que deben ubicarse en una capa específica, como el Photo Tour, utilizamos tokens para posicionarlos adecuadamente. En este caso, el Photo Tour debe comportarse como un modal, ya que necesita estar debajo de los dropdowns(bottom-sheet), diálogos (alertas), notificaciones (toast), tooltips y elementos de pantalla completa como el Swiper.

Posicionamiento contextual

Utilizamos la posición contextual o relativa para diferenciar objetos o componentes que necesitan posicionar elementos flotantes de manera absoluta dentro de un contenedor con posición relativa o fija. Este enfoque se emplea comúnmente en componentes más complejos como las card de propiedades, controles en mapas, tableros de favoritos y otros similares.

Token	Valor
$layer-below	-1
$layer-0	0
$layer-1	5
$layer-2	10
$layer-3	15
$layer-4	20
$layer-above	30