Theming & Styles

Relevant source files

The following files were used as context for generating this wiki page:

• src/provider.tsx
• src/store.ts
• src/index.ts
• package.json
• tsconfig.json

The @pcstyle/toast notification system is designed with a dual-theme architecture, providing both a "cyber" (cyberpunk-inspired) aesthetic and a "minimal" aesthetic. This system leverages React, Framer Motion for animations, and Tailwind CSS classes for styling. The core purpose of the theming system is to allow developers to toggle between a highly stylized, neon-heavy interface and a clean, modern interface while maintaining consistent notification logic.

The styling is primarily driven by the ToastProvider component, which interprets theme and position properties to apply specific CSS classes and animation variants to the toast notifications.

Sources: package.json:1-5, src/provider.tsx:1-12

Theme Definitions

The system supports two distinct themes defined in the ToastProviderProps interface.

Theme	Description	Visual Characteristics
cyber	The default aesthetic of the PCSTYLE ecosystem.	Black background (90% opacity), neon magenta (#ff00ff) borders/text, monospace fonts, and pulse animations.
minimal	A clean, high-contrast alternative.	White background, zinc-colored borders, rounded corners (rounded-xl), and standard sans-serif typography.

Sources: src/provider.tsx:8-10, src/provider.tsx:32-37

Cyber Theme Implementation

The cyber theme utilizes specific decorative elements to achieve its look, including a top-aligned gradient line with a pulse animation and heavy box shadows.

// Example of Cyber theme specific styling logic
isCyber 
  ? "bg-black/90 border border-[#ff00ff]/30 text-[#ff00ff] font-mono p-4 shadow-[0_0_20px_rgba(255,0,255,0.1)] relative" 
  : "bg-white border border-zinc-100 shadow-xl rounded-xl p-4 text-zinc-900"

Sources: src/provider.tsx:33-36

Layout & Positioning

The notification system supports four primary screen positions. The layout logic uses fixed positioning with high z-index (10000) to ensure visibility over all other UI elements.

Position	CSS Classes
top-right	top-6 right-6
top-center	top-6 left-1/2 -translate-x-1/2
bottom-right	bottom-6 right-6
bottom-center	bottom-6 left-1/2 -translate-x-1/2

Sources: src/provider.tsx:18-23, src/provider.tsx:27

Positioning Logic Flow

The following diagram illustrates how the position prop determines the container's placement and the initial entry direction of toast animations.

Animation System

Animations are handled via framer-motion, utilizing AnimatePresence to manage the entry and exit of notifications in the DOM.

• Initial State: Depends on the position (e.g., sliding in from the right if the position is top-right or bottom-right).
• Animate State: Opacity 1, X 0, Y 0 (resetting to natural flow).
• Exit State: Opacity 0 and a slight scale down (0.95).

Sources: src/provider.tsx:3-5, src/provider.tsx:28-32

Component Hierarchy & Styling

The ToastProvider serves as the root styling container, subscribing to the toastStore to render active notifications.

Style Application for Toast Elements

Different sub-elements within a toast change their appearance based on the theme flag:

1. Message Text: In cyber mode, text is transformed to uppercase with tracking-widest; in minimal, it uses standard black text.
2. Close Button: Rendered as [X] with monospace-friendly black/magenta colors in cyber or zinc-400 in minimal.
3. Action Button:
   • Cyber: Neon magenta background with black text and a glowing hover shadow.
   • Minimal: Black background with white text and rounded corners.

Sources: src/provider.tsx:44-46, src/provider.tsx:49-53, src/provider.tsx:61-66

Technical Configuration

The project is built using TypeScript with a focus on strict type safety and modern ESM standards.

• Compiler Target: ES2020.
• JSX: react-jsx (compatible with React 18/19).
• Dependencies: Requires framer-motion (>=10) and react (>=18).

Sources: tsconfig.json:3-13, package.json:18-22

Summary

Theming and Styles in @pcstyle/toast are implemented through a prop-driven architecture in the ToastProvider. By abstracting visual logic into a single provider, the system allows for flexible aesthetic switching between Cyberpunk and Minimalist designs while maintaining a consistent API for triggering notifications via the toast utility. The use of Tailwind CSS and Framer Motion ensures that these styles are both performant and highly interactive.