Added new z-index layers within tailwind config

[jordythevulder]

This will give visual feedback of which layer goes onto which element. Also implemented and replaced current z-index elements by removing them out of the frontend config.

[royduin]

I still see z-10 and z-30, why? And with this we should remove the PHP config z-index option.

[jordythevulder]

I still see z-10 and z-30, why? And with this we should remove the PHP config z-index option.

You still need this, because the parent z-index sets the layer depth between all the other componenten. While the elements inside the parent also need layering. The slide over for example has a background overlay which is fixed inset-0 but the content section needs to be on top of the overlay. So inside you can still use z-10 till z-50 to layer those elements

[royduin]

Shouldn't they also get their own name?

[jordythevulder]

Shouldn't they also get their own name?

I feel like the best way to approach this is to only name the main z-index values. If we layer each element we will get a huge list which will cause confusion when new comers see the z-index listing.

Also when giving each element it's own z-index name you indicate that it's available to change those values. But those elements should be in their exact given z-indexes. Otherwise within the slideover for example, you'll place the overlay on top of the slideover. If there is a situation where you want to add an element within the slideover you can shift the z-index values to however you like. But not naming them

[royduin]

But the autocomplete has a z-20 now, the minicart z-30, when they're close together, depending on your custom frontend maybe I want to flip those, or maybe there comes another component.. or I change the Tailwind config in my project and set "notifications" to 10 as I don't know the z-indexes within templates. The whole idea with the z-indexes in one place is to have them all in one place so you see easily what order component get.

[jordythevulder]

But the autocomplete has a z-20 now, the minicart z-30, when they're close together, depending on your custom frontend maybe I want to flip those, or maybe there comes another component.. or I change the Tailwind config in my project and set "notifications" to 10 as I don't know the z-indexes within templates. The whole idea with the z-indexes in one place is to have them all in one place so you see easily what order component get.

I think the best way is not to name every single element. This follows my same philosophy as for color variables. You should name the main ones. If you don't you get a full list with over 50 z-index values. You could nest them within those variables like: z-header-dropdown z-header-autocomplete z-header-minicart z-header-dropdown. However this feels like rapidez is a full theme where you can setup your whole shop by doing only configuration without any styling.

[royduin]

There aren't that much z-indexes and sure, nesting is fine but I'd like to see all my z-indexes so I can easily change them instead of the need to overwrite a template for it. Please just try it out so we can see how this would end up.

[jordythevulder]

i've added a naming variant in the pullrequest. In this example i've added '' string quotes around the naming because the need of - between strings. To make it more consistent i've added to every single zIndex value. Tailwind doesn't allow deep nesting like colors does.