Skip to content

Introduce central z-index register with semantic variables in core #844

Description

@dopenguin

Description

A central register of semantic z-index css custom properties named --polar-z-index-* on the :host of PolarContainer.ce.vue should be introduced to make layering of UI elements easier and less confusing.

Suggested roles are the following while values open during implementation:

  • --polar-z-index-ui-background
  • --polar-z-index-ui-foreground
  • --polar-z-index-context-menu
  • --polar-z-index-toasts
  • --polar-z-index-overlay
  • --polar-z-index-tooltip

Current behavior

~18–20 z-index values are scattered across core and plugin components, making layering hard to verify and conflict-prone. Values are hardcoded per component with no shared source.

Expected behavior

A single documented set of semantic --polar-z-index-* variables on the core :host. All components consume them via var(--polar-z-index-*). Layer changes happen in one place, eliminating magic numbers. Concrete numeric values are proposals and may be finalized during implementation.

Affected areas

No response

Out of scope

  • OpenLayers feature zIndex (e.g. in src/plugins/geoLocation/store.ts, src/plugins/pins/store.ts). This controls map-layer stacking, not UI layering, and is explicitly excluded.
  • No visual redesign. Equivalent layering via variables only. Final numeric values may be adjusted during implementation.

Metadata

Metadata

Labels

refactorRefactoring of previous code

Fields

No fields configured for Feature.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions