@vibe-labs/design-display

Display, position, overflow, visibility, and z-index tokens and utility classes for the Vibe Design System.

Usage

@import "@vibe-labs/design-display";

Contents

Tokens (display.css)

CSS custom properties defined in @layer vibe.tokens:

Token	Value	Description
--z-base	0	Default stacking context
--z-dropdown	100	Dropdown menus
--z-sticky	200	Sticky elements
--z-overlay	300	Overlays / backdrops
--z-modal	400	Modal dialogs
--z-popover	500	Popovers / tooltips
--z-toast	600	Toast notifications

Generated Utilities (display.g.css)

Utility classes generated into @layer vibe.utilities via the build script.

Display

.block · .inline-block · .inline · .hidden · .contents

Position

.static · .relative · .absolute · .fixed · .sticky

Inset

• Zero: .inset-0 · .inset-x-0 · .inset-y-0 · .top-0 · .right-0 · .bottom-0 · .left-0
• Auto: .inset-auto · .top-auto · .right-auto · .bottom-auto · .left-auto
• Full: .inset-full

Overflow

.overflow-{value} · .overflow-x-{value} · .overflow-y-{value} — where value is hidden | auto | scroll | visible

Visibility

.visible · .invisible

Z-Index

.z-{level} — base | dropdown | sticky | overlay | modal | popover | toast

Dist Structure

File	Description
index.css	Barrel — imports both files below
display.css	Token definitions (z-index scale)
display.g.css	Generated utility classes

Build

npm run build