@vibe-labs/design-components-modals

Modal and drawer component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-modals";

import { ModalSizes, ModalVariants } from "@vibe-labs/design-components-modals/types";
import type { ModalStyleProps, ModalBackdropStyleProps } from "@vibe-labs/design-components-modals/types";

Contents

Tokens (modal.css)

CSS custom properties defined in @layer vibe.tokens:

Backdrop

Token	Default	Description
--modal-backdrop-bg	--overlay-scrim	Backdrop color
--modal-backdrop-blur	4px	Backdrop blur
--modal-z	--z-modal (400)	Z-index

Container

Token	Default
--modal-bg	--surface-elevated
--modal-border-color	--border-subtle
--modal-border-width	--border-width-1
--modal-radius	--radius-xl (1rem)
--modal-shadow	--shadow-xl

Sizing

Token	Value
--modal-width-sm	24rem
--modal-width-md	32rem
--modal-width-lg	42rem
--modal-width-xl	56rem
--modal-width-full	calc(100vw - var(--space-8))
--modal-max-height	calc(100vh - var(--space-8))
--modal-margin	--space-4

Sections

Token	Default
--modal-padding-x	--space-6
--modal-padding-y	--space-5
--modal-header-gap	--space-4
--modal-footer-gap	--space-3
--modal-section-border	--border-subtle
--modal-title-font-size	--text-lg
--modal-title-font-weight	--font-semibold
--modal-speed	--duration-normal

Generated Styles (modal.g.css)

Component classes generated into @layer vibe.components.

Backdrop

Fixed fullscreen overlay with scrim color and backdrop blur. Centers the modal with overflow-y scrolling. Enter (fade-in) and exit (fade-out) animations.

Modal Container

Flex column with max-height constraint. Animates with scale-in/scale-out alongside the backdrop.

Sizes

sm · md · lg · xl · full (default: md)

Sections

• modal-header — flex row with bottom border, contains title and close button
• modal-title — semibold heading, flex-grow with min-width: 0
• modal-description — muted subtext below title
• modal-body — flex-grow scrollable content area
• modal-footer — right-aligned flex row with top border, split modifier for space-between layout

Variants

• danger — danger-subtle header border

Modifiers

• seamless — removes header/footer internal borders
• centered — centers body content with text-align center
• drawer — converts to a right-side slide-in panel (fixed, full height, rounded left corners only, slide-in/out animations)

TypeScript Types (types/)

ModalSizes    // ["sm", "md", "lg", "xl", "full"]
ModalVariants // ["danger"]

type ModalSize
type ModalVariant

interface ModalBackdropStyleProps { entering?: boolean; exiting?: boolean }
interface ModalStyleProps {
  size?: ModalSize
  variant?: ModalVariant
  seamless?: boolean
  centered?: boolean
  drawer?: boolean
}
interface ModalHeaderStyleProps {}
interface ModalTitleStyleProps {}
interface ModalDescriptionStyleProps {}
interface ModalBodyStyleProps {}
interface ModalFooterStyleProps { split?: boolean }

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
modal.css	Token definitions
modal.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (surfaces, borders, spacing, typography, elevation, transitions, overlays, z-index).

Build

npm run build