@vibe-labs/design-components-toasts

Toast notification component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

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

import { ToastVariants, ToastContainerPositions } from "@vibe-labs/design-components-toasts/types";
import type { ToastStyleProps, ToastContainerStyleProps } from "@vibe-labs/design-components-toasts/types";

Contents

Tokens (toast.css)

CSS custom properties defined in @layer vibe.tokens:

Sizing

Token	Default
--toast-max-width	24rem
--toast-min-width	16rem
--toast-padding-x	--space-4
--toast-padding-y	--space-3
--toast-gap	--space-3

Appearance

Token	Default
--toast-radius	--radius-lg
--toast-bg	--surface-elevated
--toast-color	--text-primary
--toast-border-color	--border-subtle
--toast-border-width	--border-width-1
--toast-shadow	--shadow-lg

Container

Token	Default
--toast-container-gap	--space-2
--toast-container-inset	--space-4
--toast-z	--z-toast (600)

Generated Styles (toast.g.css)

Component classes generated into @layer vibe.components.

Toast

Flex row with icon, content, and close button slots. Container has pointer-events: none, individual toasts restore pointer-events: auto.

Variants

Variant	Accent color	Background
success	--color-success	--surface-success-subtle
warning	--color-warning	--surface-warning-subtle
danger	--color-danger	--surface-danger-subtle
info	--color-info	--surface-info-subtle

All variants use a 3px left border accent.

Sections

• toast-icon — leading status icon (1.25rem)
• toast-content — flex-grow content wrapper
• toast-title — semibold heading
• toast-description — muted body text
• toast-actions — flex row for action buttons

Container Positions

Position	Placement
top-right	Fixed top-right, right-aligned
top-left	Fixed top-left, left-aligned
top-center	Fixed top-center, centered
bottom-right	Fixed bottom-right, right-aligned
bottom-left	Fixed bottom-left, left-aligned
bottom-center	Fixed bottom-center, centered

Animation

• entering — slide-in-right
• exiting — fade-out with forwards fill

TypeScript Types (types/)

ToastVariants           // ["success", "warning", "danger", "info"]
ToastContainerPositions // ["top-right", "top-left", "top-center",
                        //  "bottom-right", "bottom-left", "bottom-center"]

type ToastVariant
type ToastContainerPosition

interface ToastStyleProps { variant?: ToastVariant; entering?: boolean; exiting?: boolean }
interface ToastIconStyleProps {}
interface ToastContentStyleProps {}
interface ToastTitleStyleProps {}
interface ToastDescriptionStyleProps {}
interface ToastActionsStyleProps {}
interface ToastContainerStyleProps { position?: ToastContainerPosition }

Dist Structure

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

Dependencies

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

Build

npm run build