-```
-
-This structure provides proper semantic markup and accessibility attributes for screen readers and assistive technologies.
-
-## Theme Features
-
-### Dark Mode
-
-The Amazon theme automatically adapts to system dark mode preferences without additional configuration using the `prefers-color-scheme` media query.
-
-### Accessibility Features
-
-The Amazon theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **High Contrast**: All text meets WCAG 2.1 AA color contrast standards
-- **Screen Reader Support**: Proper labeling of interactive elements
-
-## Browser Support
-
-The Amazon theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-## Implementation Details
-
-The Amazon theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Flexbox Layout**: For responsive and flexible notification structure
-- **SVG Icons**: For resolution-independent, lightweight icons
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-- **ARIA Attributes**: For accessibility and screen reader support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
+
+
+
+
+
Title
+
Message
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/amber.md b/docs/pages/themes/amber.md
index 64d10541..e2b77a13 100644
--- a/docs/pages/themes/amber.md
+++ b/docs/pages/themes/amber.md
@@ -1,159 +1,32 @@
---
+layout: theme
permalink: /theme/amber/
title: Amber Theme
+subtitle: Modern, elegant notification system
description: Transform your notifications with the elegant Amber theme for PHPFlasher. Featuring a modern, minimalist design with subtle animations and comprehensive dark mode support.
-handler: theme.amber
-data-controller: theme-amber
----
+theme_name: theme.amber
+theme_name_short: amber
+theme_class: fl-amber
+icon: fa-sun
+color: amber
+has_assets: true
-## Amber Theme
+visual_features:
+ - Modern, minimalist design with clean aesthetics
+ - Subtle animations and transitions for a refined feel
+ - Visual progress bar indicating time before auto-dismiss
+ - Automatic dark mode support with elegant color shifts
-The Amber theme offers a modern, elegant notification style with refined aesthetics that focuses on clean design and readability. It provides a minimalist approach while maintaining visual appeal with subtle animations and transitions.
+accessibility_features:
+ - Proper ARIA roles for different notification types
+ - Live regions with appropriate assertiveness levels
+ - Respects user's reduced motion preferences
+ - Fully keyboard accessible controls
+ - High contrast text meeting WCAG 2.1 AA standards
+ - Descriptive aria-labels for screen readers
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Amber theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.amber', // Make Amber the default theme
-
- 'themes' => [
- 'amber' => [
- 'scripts' => [
- '/vendor/flasher/themes/amber.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/amber.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.amber # Make Amber the default theme
-
- themes:
- amber:
- scripts:
- - '/vendor/flasher/themes/amber.min.js'
- styles:
- - '/vendor/flasher/themes/amber.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { amberTheme } from '@flasher/flasher/themes';
-flasher.addTheme('amber', amberTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.amber';
-
-// Or use it for specific notifications
-flasher.success('Your changes have been saved successfully');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Amber styling:
-
-{% assign successMessage = 'Your changes have been saved successfully.' %}
-{% assign errorMessage = 'An error occurred while saving your changes.' %}
-{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
-{% assign infoMessage = 'New features have been added to your account.' %}
-
-
-
-### PHP
-
-```php
-#/ amber types
-
-// With Amber set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Amber set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Amber Theme for Specific Notifications
-
-If Amber isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.amber')
- ->success('This notification uses Amber theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.amber').success('This notification uses Amber theme.');
-```
-
-### Custom Colors
-
-The Amber theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--amber-bg-light: #ffffff; /* Light mode background */
--amber-bg-dark: #1e293b; /* Dark mode background */
@@ -170,77 +43,19 @@ The Amber theme uses CSS variables that can be customized to match your brand:
/* Dark mode shadows */
--amber-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.25);
-}
-```
+ }
-## HTML Structure
-
-The Amber theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
-
Message text
-
-
-
-
-
-
-
-```
-
-This structure includes a progress bar that shows the time remaining before the notification auto-dismisses.
-
-## Theme Features
-
-### Dark Mode
-
-The Amber theme automatically adapts to system dark mode preferences without additional configuration using the `prefers-color-scheme` media query.
-
-### Accessibility Features
-
-The Amber theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
-- **Button Labels**: Close button has descriptive aria-label for screen readers
-
-### Key Differences from Default Theme
-
-The Amber theme differs from the default theme in several ways:
-
-1. **More Minimal**: Cleaner design with less ornamentation
-2. **Subtle Shadows**: Uses softer box shadows for a modern look
-3. **Smaller Icon**: Uses a more compact icon size
-4. **Progress Bar**: Visual indicator for auto-dismiss timing
-5. **Different Animation**: Uses a top-down entrance animation
-6. **Colored Close Button**: Close button color matches notification type
-
-## Browser Support
-
-The Amber theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-## Implementation Details
-
-The Amber theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Flexbox Layout**: For responsive and flexible notification structure
-- **CSS Animations**: For entrance effects and progress bar
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-- **Core Icons**: Uses the PHPFlasher core icon system
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
+
+
Message text
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/aurora.md b/docs/pages/themes/aurora.md
index 8b85a278..45fde7f9 100644
--- a/docs/pages/themes/aurora.md
+++ b/docs/pages/themes/aurora.md
@@ -1,159 +1,31 @@
---
+layout: theme
permalink: /theme/aurora/
title: Aurora Theme
+subtitle: Elegant glass-like notification system
description: Add elegant glass-like notifications to your application with the Aurora theme for PHPFlasher. Featuring translucent backgrounds, subtle gradients, and modern backdrop blur effects.
-handler: theme.aurora
-data-controller: theme-aurora
----
+theme_name: theme.aurora
+theme_name_short: aurora
+theme_class: fl-aurora
+icon: fa-sparkles
+color: blue
+has_assets: true
-## Aurora Theme
+visual_features:
+ - Glass-like appearance with translucent backgrounds
+ - Subtle gradient overlays for each notification type
+ - Modern backdrop blur effect for a frosted glass look
+ - Elegant animation combining fade, translation and scale
-The Aurora theme provides an elegant, glass-like notification style with translucent backgrounds, subtle gradients, and backdrop blur effects. It offers a modern, refined aesthetic inspired by contemporary UI design trends like glass morphism.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion adaptation for users with motion sensitivity
+ - High contrast maintained despite translucent backgrounds
+ - Fully keyboard accessible controls
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Aurora theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.aurora', // Make Aurora the default theme
-
- 'themes' => [
- 'aurora' => [
- 'scripts' => [
- '/vendor/flasher/themes/aurora.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/aurora.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.aurora # Make Aurora the default theme
-
- themes:
- aurora:
- scripts:
- - '/vendor/flasher/themes/aurora.min.js'
- styles:
- - '/vendor/flasher/themes/aurora.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { auroraTheme } from '@flasher/flasher/themes';
-flasher.addTheme('aurora', auroraTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.aurora';
-
-// Or use it for specific notifications
-flasher.success('Your profile has been updated');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Aurora styling:
-
-{% assign successMessage = 'Your profile has been updated successfully.' %}
-{% assign errorMessage = 'Please check your connection and try again.' %}
-{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
-{% assign infoMessage = 'New feature available in your dashboard.' %}
-
-
-
-### PHP
-
-```php
-#/ aurora types
-
-// With Aurora set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Aurora set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Aurora Theme for Specific Notifications
-
-If Aurora isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.aurora')
- ->success('This notification uses Aurora theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.aurora').success('This notification uses Aurora theme.');
-```
-
-### Custom Colors and Appearance
-
-The Aurora theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--aurora-bg-light: rgba(255, 255, 255, 0.95); /* Light background */
--aurora-bg-dark: rgba(20, 20, 28, 0.92); /* Dark background */
@@ -173,79 +45,16 @@ The Aurora theme uses CSS variables that can be customized to match your brand:
--aurora-info-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.2) 100%);
--aurora-warning-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.2) 100%);
--aurora-error-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.2) 100%);
-}
-```
+ }
-## HTML Structure
-
-The Aurora theme generates notifications with the following HTML structure:
-
-```html
-
-
-
Message text
-
-
-
-
-
-
-```
-
-This minimalist structure focuses on content by omitting unnecessary UI elements while still maintaining a progress bar that shows the time remaining before auto-dismiss.
-
-## Theme Features
-
-### Glass Morphism Effect
-
-The Aurora theme uses CSS `backdrop-filter` to create its signature glass effect, giving notifications a modern, translucent appearance with background blur.
-
-### Dark Mode
-
-The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background transparency and text colors for optimal readability.
-
-### Accessibility Features
-
-The Aurora theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **Color Contrast**: Maintains proper contrast ratios even with translucent backgrounds
-- **Button Labels**: Close button has descriptive aria-label for screen readers
-
-### Animation Technique
-
-The entrance animation combines three effects for a refined appearance:
-
-1. **Opacity**: Fade in from transparent to visible
-2. **Translation**: Slight movement from above
-3. **Scale**: Subtle growth from slightly smaller to full size
-
-This combination creates a more organic, sophisticated appearance than simple fades or slides.
-
-## Browser Support
-
-The Aurora theme is compatible with all modern browsers that support CSS variables and backdrop filters:
-
-- Chrome 76+
-- Firefox 70+
-- Safari 9+
-- Edge 17+
-- Opera 64+
-- Mobile browsers on iOS and Android
-
-For browsers that don't support backdrop filters, the theme gracefully degrades to using just the translucent background.
-
-## Implementation Details
-
-The Aurora theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Backdrop Filter**: For the frosted glass effect
-- **Gradient Overlays**: Using `::before` pseudo-elements for type-specific styling
-- **CSS Animations**: For smooth entrance effects and progress bar
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
Message text
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/crystal.md b/docs/pages/themes/crystal.md
index a0e68a25..557ce89e 100644
--- a/docs/pages/themes/crystal.md
+++ b/docs/pages/themes/crystal.md
@@ -1,159 +1,32 @@
---
+layout: theme
permalink: /theme/crystal/
title: Crystal Theme
+subtitle: Clean, monochromatic notification system
description: Enhance your notifications with the elegant Crystal theme for PHPFlasher. Featuring a clean, monochromatic design with colored text and subtle animation effects.
-handler: theme.crystal
-data-controller: theme-crystal
----
+theme_name: theme.crystal
+theme_name_short: crystal
+theme_class: fl-crystal
+icon: fa-diamond
+color: indigo
+has_assets: true
-## Crystal Theme
+visual_features:
+ - Monochromatic design with type-specific colored text
+ - Subtle entrance animation with smooth slide-in and fade effects
+ - Gentle pulsing shadow on hover creates a "breathing" effect
+ - Clean, minimalist interface focused on content clarity
-The Crystal theme provides an elegant, clean notification style with subtle animations and a focus on simplicity. It features a monochromatic design with type-specific colored text and a gentle pulsing shadow effect on hover.
+accessibility_features:
+ - Type-appropriate ARIA roles for screen readers
+ - Optimized aria-live regions based on message importance
+ - Reduced motion adaptation for motion-sensitive users
+ - High contrast text for optimal readability
+ - Fully keyboard accessible with visual feedback
+ - Descriptive aria-labels for interactive elements
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Crystal theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.crystal', // Make Crystal the default theme
-
- 'themes' => [
- 'crystal' => [
- 'scripts' => [
- '/vendor/flasher/themes/crystal.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/crystal.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.crystal # Make Crystal the default theme
-
- themes:
- crystal:
- scripts:
- - '/vendor/flasher/themes/crystal.min.js'
- styles:
- - '/vendor/flasher/themes/crystal.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { crystalTheme } from '@flasher/flasher/themes';
-flasher.addTheme('crystal', crystalTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.crystal';
-
-// Or use it for specific notifications
-flasher.success('Document saved successfully');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Crystal styling:
-
-{% assign successMessage = 'Document saved successfully.' %}
-{% assign errorMessage = 'An error occurred while saving your document.' %}
-{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
-{% assign infoMessage = 'New features have been added to the editor.' %}
-
-
-
-### PHP
-
-```php
-#/ crystal types
-
-// With Crystal set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Crystal set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Crystal Theme for Specific Notifications
-
-If Crystal isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.crystal')
- ->success('This notification uses Crystal theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.crystal').success('This notification uses Crystal theme.');
-```
-
-### Custom Colors and Appearance
-
-The Crystal theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--crystal-bg-light: #ffffff; /* Light mode background */
--crystal-bg-dark: rgba(30, 30, 30, 0.95); /* Dark mode background */
@@ -167,79 +40,18 @@ The Crystal theme uses CSS variables that can be customized to match your brand:
--fl-info: #3b82f6; /* Info color */
--fl-warning: #f59e0b; /* Warning color */
--fl-error: #ef4444; /* Error color */
-}
-```
+ }
-## HTML Structure
-
-The Crystal theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
Message text
-
-
-
-
-
-
-
-```
-
-This minimalist structure focuses on content with a clean design, while still maintaining a progress bar that shows the time remaining before auto-dismiss.
-
-## Theme Features
-
-### Elegant Animations
-
-The Crystal theme features two distinct animations:
-
-1. **Entrance Animation**: A smooth slide-in from above with a fade-in effect
-2. **Hover Animation**: A gentle pulsing shadow that creates a subtle "breathing" effect
-
-The hover animation is disabled in dark mode and for users who prefer reduced motion, replaced with a static enhanced shadow effect.
-
-### Dark Mode
-
-The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background and text colors for optimal readability.
-
-### Design Philosophy
-
-The Crystal theme embodies clarity and simplicity. Rather than using colored backgrounds or borders, it employs colored text to indicate notification types. This creates a cleaner, more sophisticated appearance while still providing clear visual cues about the notification's nature.
-
-### Accessibility Features
-
-The Crystal theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
-- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
-- **Color Contrast**: High contrast between text and background for readability
-- **Button Labels**: Close button has descriptive aria-label for screen readers
-
-## Browser Support
-
-The Crystal theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-## Implementation Details
-
-The Crystal theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **CSS Transitions**: For smooth hover effects
-- **Keyframe Animations**: For entrance and pulsing shadow effects
-- **Absolute Positioning**: For consistent close button layout
-- **Progress Bar**: Shows countdown until notification dismissal
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
+
Message text
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/emerald.md b/docs/pages/themes/emerald.md
index 83c33ec2..f52e26f3 100644
--- a/docs/pages/themes/emerald.md
+++ b/docs/pages/themes/emerald.md
@@ -1,159 +1,31 @@
---
+layout: theme
permalink: /theme/emerald/
title: Emerald Theme
+subtitle: Elegant glass-like notifications with bounce effect
description: Enhance your notifications with the elegant Emerald theme for PHPFlasher. Featuring a glass-like appearance with bounce animation and minimalist design for a modern, polished user experience.
-handler: theme.emerald
-data-controller: theme-emerald
----
+theme_name: theme.emerald
+theme_name_short: emerald
+theme_class: fl-emerald
+icon: fa-gem
+color: emerald
+has_assets: true
-## Emerald Theme
+visual_features:
+ - Distinctive bounce animation for eye-catching entrance
+ - Glass-like translucent background with blur effect
+ - Minimalist design focusing on content clarity
+ - Colored text indicators instead of backgrounds for elegance
-The Emerald theme provides an elegant, glass-like notification style with a distinctive bounce animation and translucent background. It focuses on minimalism and modern aesthetics, featuring colored text rather than backgrounds to indicate notification types.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for users with motion sensitivity
+ - Relative text sizing that respects user preferences
+ - Fully keyboard accessible controls with descriptive labels
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Emerald theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.emerald', // Make Emerald the default theme
-
- 'themes' => [
- 'emerald' => [
- 'scripts' => [
- '/vendor/flasher/themes/emerald.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/emerald.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.emerald # Make Emerald the default theme
-
- themes:
- emerald:
- scripts:
- - '/vendor/flasher/themes/emerald.min.js'
- styles:
- - '/vendor/flasher/themes/emerald.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { emeraldTheme } from '@flasher/flasher/themes';
-flasher.addTheme('emerald', emeraldTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.emerald';
-
-// Or use it for specific notifications
-flasher.success('Your changes have been saved');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Emerald styling:
-
-{% assign successMessage = 'Your changes have been saved successfully.' %}
-{% assign errorMessage = 'An error occurred while saving your changes.' %}
-{% assign warningMessage = 'Your session will expire soon.' %}
-{% assign infoMessage = 'New features have been added to your dashboard.' %}
-
-
-
-### PHP
-
-```php
-#/ emerald types
-
-// With Emerald set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Emerald set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Emerald Theme for Specific Notifications
-
-If Emerald isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.emerald')
- ->success('This notification uses Emerald theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.emerald').success('This notification uses Emerald theme.');
-```
-
-### Custom Colors and Appearance
-
-The Emerald theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base colors */
--emerald-bg-light: rgba(255, 255, 255, 0.9); /* Light background */
--emerald-bg-dark: rgba(30, 30, 30, 0.9); /* Dark background */
@@ -167,87 +39,13 @@ The Emerald theme uses CSS variables that can be customized to match your brand:
--emerald-error: #e74c3c; /* Error color */
--emerald-warning: #f39c12; /* Warning color */
--emerald-info: #3498db; /* Info color */
-}
-```
+ }
-## HTML Structure
-
-The Emerald theme generates notifications with the following HTML structure:
-
-```html
-
-
-
Message text
-
-
-
-```
-
-This minimalist structure focuses on content by omitting unnecessary UI elements for a cleaner, more elegant look.
-
-## Theme Features
-
-### Distinctive Animation
-
-The Emerald theme features a unique bounce animation that works as follows:
-
-1. **Start**: The notification begins at 50% size and slightly below its final position
-2. **Middle**: It quickly grows to 110% size and slightly above its final position
-3. **End**: It settles back to 100% size at its final position
-
-This creates a playful yet elegant "bounce" effect that draws attention without being too disruptive.
-
-### Glass Morphism Effect
-
-The theme uses CSS `backdrop-filter` to create a frosted glass effect, giving notifications a modern, translucent appearance with background blur.
-
-### Dark Mode
-
-The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background transparency and text colors for optimal readability.
-
-### Design Philosophy
-
-The Emerald theme is named after its polished, refined appearance that gives notifications a gem-like quality. Its design principles include:
-
-- **Simplicity**: Only essential elements are included
-- **Elegance**: Soft blurs, shadows, and animations create a premium feel
-- **Subtlety**: Colored text rather than backgrounds for a more refined look
-- **Modernity**: Contemporary typography and glass-like effects
-- **Focus**: Clear emphasis on the message content
-
-### Accessibility Features
-
-The Emerald theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **Text Sizing**: Uses relative units (rem) for text to respect user font size preferences
-- **Button Labels**: Close button has descriptive aria-label for screen readers
-
-## Browser Support
-
-The Emerald theme is compatible with all modern browsers:
-
-- Chrome 76+
-- Firefox 70+
-- Safari 9+
-- Edge 79+
-- Opera 63+
-- Mobile browsers on iOS and Android
-
-For browsers that don't support backdrop-filter, the theme gracefully degrades to a translucent background without blur.
-
-## Implementation Details
-
-The Emerald theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Backdrop Filter**: For the frosted glass effect
-- **CSS Animations**: For the distinctive bounce entrance effect
-- **Inter Font**: Optimized for clean, modern typography (with system font fallback)
-- **Box Shadows**: For subtle depth and dimension
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
Message text
+
+
+
+---
diff --git a/docs/pages/themes/facebook.md b/docs/pages/themes/facebook.md
index f27fa13a..8d65ca37 100644
--- a/docs/pages/themes/facebook.md
+++ b/docs/pages/themes/facebook.md
@@ -1,180 +1,33 @@
---
+layout: theme
permalink: /theme/facebook/
title: Facebook Theme
+subtitle: Familiar social media notification style
description: Add Facebook-style notifications to your application with the Facebook theme for PHPFlasher. Featuring familiar notification cards, circular icons, and Facebook's signature design elements.
-handler: theme.facebook
-data-controller: theme-facebook
----
+theme_name: theme.facebook
+theme_name_short: facebook
+theme_class: fl-facebook
+icon: fa-facebook
+color: blue
+has_assets: true
-## Facebook Theme
+visual_features:
+ - Rounded notification cards with subtle drop shadows
+ - Circular colored icons for each notification type
+ - Facebook's signature typography and color scheme
+ - Timestamp display showing when notifications were created
+ - Interactive elements with familiar hover states
-The Facebook theme replicates the familiar notification style from Facebook's interface, providing a user experience that billions of people worldwide will instantly recognize. It features Facebook's signature look and feel, including rounded cards, circular icons, and the platform's distinctive typography and color scheme.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion support for users with motion sensitivity
+ - Fully keyboard accessible interactive elements
+ - Color contrast optimized for readability while maintaining Facebook's look
+ - Descriptive aria-labels for all controls
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Facebook theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.facebook', // Make Facebook the default theme
-
- 'themes' => [
- 'facebook' => [
- 'scripts' => [
- '/vendor/flasher/themes/facebook.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/facebook.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.facebook # Make Facebook the default theme
-
- themes:
- facebook:
- scripts:
- - '/vendor/flasher/themes/facebook.min.js'
- styles:
- - '/vendor/flasher/themes/facebook.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { facebookTheme } from '@flasher/flasher/themes';
-flasher.addTheme('facebook', facebookTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.facebook';
-
-// Or use it for specific notifications
-flasher.success('Your post was published successfully');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Facebook styling:
-
-{% assign successMessage = 'Your post was published successfully.' %}
-{% assign errorMessage = 'There was a problem uploading your photo.' %}
-{% assign warningMessage = 'Your account is approaching storage limits.' %}
-{% assign infoMessage = '3 people reacted to your comment.' %}
-
-
-
-### PHP
-
-```php
-#/ facebook types
-
-// With Facebook set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Facebook set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Facebook Theme for Specific Notifications
-
-If Facebook isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.facebook')
- ->success('This notification uses Facebook theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.facebook').success('This notification uses Facebook theme.');
-```
-
-### Adding a Timestamp
-
-You can add a timestamp to your Facebook-style notification:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.facebook')
- ->success('Your post was published successfully.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.facebook')
- .success('Your post was published successfully');
-```
-
-If no timestamp is provided, the current time will be used automatically.
-
-### Custom Colors and Appearance
-
-The Facebook theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base colors */
--fb-bg-light: #ffffff; /* Light mode background */
--fb-bg-dark: #242526; /* Dark mode background */
@@ -190,87 +43,29 @@ The Facebook theme uses CSS variables that can be customized to match your brand
--fb-info: #1876f2; /* Info color (Facebook blue) */
--fb-warning: #f7b928; /* Warning color */
--fb-error: #e41e3f; /* Error color */
-}
-```
+ }
-## HTML Structure
-
-The Facebook theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
-
-
-
-
-
Message text
-
- 15:43
-
-
-
-
-
-
-
-```
-
-This structure closely mimics Facebook's notification layout, including the circular icons, message content, timestamp, and close button.
-
-## Theme Features
-
-### Facebook-Style Design
-
-The Facebook theme accurately recreates Facebook's notification appearance with:
-
-- Rounded notification cards with subtle shadows
-- Circular colored icons for each notification type
-- Timestamp display showing when the notification was created
-- Interactive close button with hover effects
-- Facebook's signature typography
-
-### Dark Mode
-
-The theme automatically adapts to system dark mode preferences without additional configuration, switching to Facebook's dark theme colors for a consistent experience.
-
-### Accessibility Features
-
-The Facebook theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **Color Contrast**: Maintains Facebook's visual identity while ensuring readability
-- **Button Labels**: Close button has descriptive aria-label for screen readers
-
-## Browser Support
-
-The Facebook theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-## Implementation Details
-
-The Facebook theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Facebook's Font Stack**: For authentic typography
-- **SVG Icons**: For high-quality, resolution-independent icons
-- **CSS Animations**: For subtle entrance effects
-- **CSS Box Shadows**: For depth and dimension
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
+
+
+
+
+
+
Message text
+
+ 15:43
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/flasher.md b/docs/pages/themes/flasher.md
index 2c5734cc..65d18449 100644
--- a/docs/pages/themes/flasher.md
+++ b/docs/pages/themes/flasher.md
@@ -4,7 +4,7 @@ permalink: /theme/flasher/
title: Flasher Theme
subtitle: The default notification system for PHPFlasher
description: The default notification theme for PHPFlasher with a clean design, colored borders, and accessible notifications for your web applications.
-theme_name: flasher
+theme_name: theme.flasher
theme_name_short: flasher
theme_class: fl
icon: fa-bolt
diff --git a/docs/pages/themes/google.md b/docs/pages/themes/google.md
index e46a5971..48c284fe 100644
--- a/docs/pages/themes/google.md
+++ b/docs/pages/themes/google.md
@@ -1,163 +1,33 @@
---
+layout: theme
permalink: /theme/google/
title: Google Theme
+subtitle: Material Design-inspired notifications
description: Add Material Design-inspired notifications to your application with the Google theme for PHPFlasher. Featuring Google's card-based layout, typography, and interactive elements like ripple effects.
-handler: theme.google
-data-controller: theme-google
----
+theme_name: theme.google
+theme_name_short: google
+theme_class: fl-google
+icon: fa-google
+color: red
+has_assets: true
-## Google Theme
+visual_features:
+ - Material Design elevation with three-component shadow system
+ - Card-based layout with Google's signature typography
+ - Interactive ripple effect for tactile button feedback
+ - Progress bar showing time until auto-dismiss
+ - Responsive design that adapts to different screen sizes
-The Google theme provides notifications inspired by Google's Material Design system, one of the most recognized design languages worldwide. It features Google's distinctive card-based layout, typography, elevation patterns, and interactive elements like ripple effects that will be immediately familiar to users of Google products.
+accessibility_features:
+ - ARIA roles specific to each notification type
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for users with motion sensitivity
+ - High contrast text meeting WCAG 2.1 AA standards
+ - Fully keyboard accessible with clear focus indicators
+ - Descriptive aria-labels for interactive elements
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Google theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.google', // Make Google the default theme
-
- 'themes' => [
- 'google' => [
- 'scripts' => [
- '/vendor/flasher/themes/google.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/google.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.google # Make Google the default theme
-
- themes:
- google:
- scripts:
- - '/vendor/flasher/themes/google.min.js'
- styles:
- - '/vendor/flasher/themes/google.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { googleTheme } from '@flasher/flasher/themes';
-flasher.addTheme('google', googleTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.google';
-
-// Or use it for specific notifications
-flasher.success('Operation completed successfully');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Google styling:
-
-{% assign successMessage = 'Operation completed successfully.' %}
-{% assign errorMessage = 'An error occurred during the operation.' %}
-{% assign warningMessage = 'This action cannot be undone.' %}
-{% assign infoMessage = 'New updates are available.' %}
-
-
-
-### PHP
-
-```php
-#/ google types
-
-// With Google set as default theme
-flash()->success('{{ successMessage }}', 'Success');
-flash()->error('{{ errorMessage }}', 'Error');
-flash()->warning('{{ warningMessage }}', 'Warning');
-flash()->info('{{ infoMessage }}', 'Information');
-```
-
-### JavaScript
-
-```javascript
-// With Google set as default theme
-flasher.success('{{ successMessage }}', 'Success');
-flasher.error('{{ errorMessage }}', 'Error');
-flasher.warning('{{ warningMessage }}', 'Warning');
-flasher.info('{{ infoMessage }}', 'Information');
-```
-
-## Customization
-
-### Using Google Theme for Specific Notifications
-
-If Google isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.google')
- ->success('This notification uses Google theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.google').success('This notification uses Google theme.');
-```
-
-### Custom Colors and Appearance
-
-The Google theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--md-bg-light: #ffffff; /* Light mode background */
--md-bg-dark: #2d2d2d; /* Dark mode background */
@@ -177,120 +47,28 @@ The Google theme uses CSS variables that can be customized to match your brand w
/* Animation timing */
--md-animation-duration: 0.3s; /* Entrance animation duration */
--md-ripple-duration: 0.6s; /* Button ripple effect duration */
-}
-```
+ }
-## HTML Structure
-
-The Google theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
-
-
-
-
Title (if provided)
-
Message text
-
-
-
-
-
-
-
-
-
-
-```
-
-This structure follows Material Design principles with cards, proper typography hierarchy, and interactive elements.
-
-## Theme Features
-
-### Material Design Elements
-
-#### Elevation
-
-The theme uses proper Material Design elevation with three shadow components:
-
-1. **Umbra**: The darkest, sharpest shadow representing the main shadow
-2. **Penumbra**: The mid-tone, slightly softer shadow
-3. **Ambient**: The lightest, most diffuse shadow
-
-This creates the characteristic Material Design "floating" effect for cards.
-
-#### Typography
-
-Following Material Design typography guidelines:
-
-- **Title**: 16px (1rem), medium weight (500)
-- **Message**: 14px (0.875rem), regular weight (400), 60% opacity for secondary text
-- **Button**: 13px (0.8125rem), medium weight (500), uppercase with letterSpacing
-
-#### Ripple Effect
-
-The theme includes Material Design's signature "ink ripple" effect:
-
-1. A small circle appears at the point of interaction
-2. The circle rapidly expands outward
-3. The effect fades out as it reaches full size
-
-This provides visual feedback that enhances the tactile feeling of the interface.
-
-### Dark Mode
-
-The Google theme implements Material Design's dark theme guidelines:
-
-- Dark surfaces (#2d2d2d)
-- Light text (87% white for primary, 60% white for secondary)
-- Adjusted shadows for better visibility on dark backgrounds
-- Higher contrast for hover states (8% opacity instead of 4%)
-
-### Accessibility Features
-
-The Google theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
-- **Keyboard Access**: Action button is fully keyboard accessible
-- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
-- **Text Alternatives**: Descriptive aria-labels for interactive elements
-
-## Browser Support
-
-The Google theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
-
-## Implementation Details
-
-The Google theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Material Design Elevation**: Proper shadow implementation for depth
-- **Ripple Animation**: For tactile button feedback
-- **CSS Animations**: With Material Design easing curves
-- **Linear Progress**: For countdown visualization
-- **Roboto Font**: Falls back to system fonts if unavailable
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
-
-For the best experience, it's recommended to include the Roboto font in your project:
-
-```html
-
-```
+html_structure: |
+
+
+
+
+
+
+
+
Title (if provided)
+
Message text
+
+
+
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/ios.md b/docs/pages/themes/ios.md
index fed52e8f..69d41890 100644
--- a/docs/pages/themes/ios.md
+++ b/docs/pages/themes/ios.md
@@ -1,163 +1,33 @@
---
+layout: theme
permalink: /theme/ios/
title: iOS Theme
+subtitle: Apple-style notification system
description: Add Apple iOS-style notifications to your application with the iOS theme for PHPFlasher. Featuring frosted glass effects, app icons, and animations that mimic native iOS notifications.
-handler: theme.ios
-data-controller: theme-ios
----
+theme_name: theme.ios
+theme_name_short: ios
+theme_class: fl-ios
+icon: fa-apple
+color: slate
+has_assets: true
-## iOS Theme
+visual_features:
+ - Apple's signature frosted glass backdrop effect
+ - App icon design with colored backgrounds
+ - Real-time timestamp display in iOS format
+ - Smooth entrance and content expansion animations
+ - Adaptive design that matches iOS light and dark mode
-The iOS theme provides notifications styled after Apple's iOS notification system, creating a familiar experience for users of iPhones and iPads. It features Apple's distinctive frosted glass effect, app icon style, and subtle animations that mimic native iOS notifications.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for motion-sensitive users
+ - High contrast text that adapts to light and dark modes
+ - Fully keyboard accessible close button
+ - Mobile-optimized responsive layout
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the iOS theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.ios', // Make iOS the default theme
-
- 'themes' => [
- 'ios' => [
- 'scripts' => [
- '/vendor/flasher/themes/ios.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/ios.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.ios # Make iOS the default theme
-
- themes:
- ios:
- scripts:
- - '/vendor/flasher/themes/ios.min.js'
- styles:
- - '/vendor/flasher/themes/ios.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { iosTheme } from '@flasher/flasher/themes';
-flasher.addTheme('ios', iosTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.ios';
-
-// Or use it for specific notifications
-flasher.success('Your photo was uploaded successfully');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with iOS styling:
-
-{% assign successMessage = 'Your photo was uploaded successfully.' %}
-{% assign errorMessage = 'Unable to connect to server.' %}
-{% assign warningMessage = 'Low storage space on your device.' %}
-{% assign infoMessage = 'New software update available.' %}
-
-
-
-### PHP
-
-```php
-#/ ios types
-
-// With iOS set as default theme
-flash()->success('{{ successMessage }}', 'Photos');
-flash()->error('{{ errorMessage }}', 'Settings');
-flash()->warning('{{ warningMessage }}', 'Storage');
-flash()->info('{{ infoMessage }}', 'App Store');
-```
-
-### JavaScript
-
-```javascript
-// With iOS set as default theme
-flasher.success('{{ successMessage }}', 'Photos');
-flasher.error('{{ errorMessage }}', 'Settings');
-flasher.warning('{{ warningMessage }}', 'Storage');
-flasher.info('{{ infoMessage }}', 'App Store');
-```
-
-## Customization
-
-### Using iOS Theme for Specific Notifications
-
-If iOS isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.ios')
- ->success('This notification uses iOS theme.', 'Photos');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.ios').success('This notification uses iOS theme.', 'Photos');
-```
-
-### Custom Colors and Appearance
-
-The iOS theme uses CSS variables that can be customized to match your brand while maintaining the iOS look:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--ios-bg-light: rgba(255, 255, 255, 0.85); /* Light mode background */
--ios-bg-dark: rgba(30, 30, 30, 0.85); /* Dark mode background */
@@ -173,108 +43,26 @@ The iOS theme uses CSS variables that can be customized to match your brand whil
--ios-info: #007aff; /* iOS blue */
--ios-warning: #ff9500; /* iOS orange */
--ios-error: #ff3b30; /* iOS red */
-}
-```
+ }
-## HTML Structure
-
-The iOS theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
-
-
-
-
App Name/Title
-
2025-03-10 00:14:11
-
-
-
-
Message text
-
-
-
-
-```
-
-This structure mimics the iOS notification layout, including the app icon, app name, current time, and message content.
-
-## Theme Features
-
-### iOS-Specific Design Elements
-
-#### Frosted Glass Effect
-
-The iOS theme uses `backdrop-filter: blur()` to create Apple's signature frosted glass effect. This creates a semi-transparent background that blurs content behind the notification.
-
-#### App Icon
-
-The app icon follows iOS design principles:
-- Square with slightly rounded corners (5px radius)
-- Colored background based on notification type
-- White icon centered within the square
-
-#### Real-Time Timestamp
-
-The theme automatically displays the current time in the iOS format (HH:MM), just like native iOS notifications.
-
-#### Smooth Animations
-
-The iOS theme features two carefully crafted animations:
-
-1. **Entrance Animation**: Slides in from above with a subtle scaling effect
-2. **Content Expansion**: The content area expands with a slight delay after the header appears
-
-These animations mimic the iOS notification animation style with a quick start and gentle end.
-
-### Dark Mode
-
-The theme automatically adapts to system dark mode preferences, switching to the iOS dark appearance:
-- Dark semi-transparent background
-- Light text
-- Adjusted shadows for better visibility
-- Lighter close button background
-
-### Accessibility Features
-
-The iOS theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **Color Contrast**: Maintains proper contrast ratios in both light and dark modes
-- **Mobile Optimization**: Responsive design that adjusts for small screens
-
-## Browser Support
-
-The iOS theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-For browsers that don't support backdrop-filter, the theme gracefully degrades to using just the semi-transparent background without blur.
-
-## Implementation Details
-
-The iOS theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Backdrop Filter**: For the frosted glass effect
-- **CSS Animations**: For entrance and content expansion effects
-- **San Francisco Font**: Uses Apple's system font stack with appropriate fallbacks
-- **Real-Time Timestamps**: Automatically displays current time in iOS format
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
-
-**Note:** The title parameter is used as the "app name" in the notification. If no title is provided, it defaults to "PHPFlasher".
+html_structure: |
+
+
+
+
+
+
+
+
App Name/Title
+
2025-03-10 00:14:11
+
+
+
+
Message text
+
+
+
+
+---
diff --git a/docs/pages/themes/jade.md b/docs/pages/themes/jade.md
index 8a07a26e..2744d277 100644
--- a/docs/pages/themes/jade.md
+++ b/docs/pages/themes/jade.md
@@ -1,159 +1,32 @@
---
+layout: theme
permalink: /theme/jade/
title: Jade Theme
+subtitle: Calm, minimalist notification system
description: Enhance your notifications with the calm, minimalist Jade theme for PHPFlasher. Featuring soft colors, rounded corners, and subtle animations for a soothing user experience.
-handler: theme.jade
-data-controller: theme-jade
----
+theme_name: theme.jade
+theme_name_short: jade
+theme_class: fl-jade
+icon: fa-leaf
+color: green
+has_assets: true
-## Jade Theme
+visual_features:
+ - Soft, pastel colors with generous padding for a calm appearance
+ - Rounded corners (1rem radius) creating a gentle, friendly feel
+ - Refined entrance animation combining fade, scaling and movement
+ - Clean design that emphasizes content without unnecessary elements
-The Jade theme provides a calm, minimalist notification style with soft colors and subtle animations. It features a clean design that emphasizes message content through generous padding, rounded corners, and type-specific color schemes. The theme takes its name from the natural, soothing quality of its appearance.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for users with motion sensitivity
+ - High contrast between background and text colors
+ - Fully keyboard accessible close button with visual feedback
+ - Descriptive aria-labels for interactive elements
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Jade theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.jade', // Make Jade the default theme
-
- 'themes' => [
- 'jade' => [
- 'scripts' => [
- '/vendor/flasher/themes/jade.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/jade.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.jade # Make Jade the default theme
-
- themes:
- jade:
- scripts:
- - '/vendor/flasher/themes/jade.min.js'
- styles:
- - '/vendor/flasher/themes/jade.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { jadeTheme } from '@flasher/flasher/themes';
-flasher.addTheme('jade', jadeTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.jade';
-
-// Or use it for specific notifications
-flasher.success('Your changes have been saved');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Jade styling:
-
-{% assign successMessage = 'Your changes have been saved successfully.' %}
-{% assign errorMessage = 'An error occurred while saving your changes.' %}
-{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
-{% assign infoMessage = 'New features have been added to your dashboard.' %}
-
-
-
-### PHP
-
-```php
-#/ jade types
-
-// With Jade set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Jade set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Jade Theme for Specific Notifications
-
-If Jade isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.jade')
- ->success('This notification uses Jade theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.jade').success('This notification uses Jade theme.');
-```
-
-### Custom Colors and Appearance
-
-The Jade theme uses CSS variables that can be customized to match your brand while maintaining its calm aesthetic:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--jade-text-light: #5f6c7b; /* Text color in light mode */
--jade-text-dark: #e2e8f0; /* Text color in dark mode */
@@ -174,98 +47,16 @@ The Jade theme uses CSS variables that can be customized to match your brand whi
--jade-info-bg-dark: rgba(59, 130, 246, 0.15); /* Dark mode info */
--jade-warning-bg-dark: rgba(245, 158, 11, 0.15); /* Dark mode warning */
--jade-error-bg-dark: rgba(220, 38, 38, 0.15); /* Dark mode error */
-}
-```
+ }
-## HTML Structure
-
-The Jade theme generates notifications with the following HTML structure:
-
-```html
-
-
-
Message text
-
-
-
-
-
-
-```
-
-This minimalist structure focuses on content by omitting icons and unnecessary UI elements for a cleaner, more elegant look.
-
-## Theme Features
-
-### Design Philosophy
-
-The Jade theme embodies several design principles:
-
-1. **Simplicity**: Only essential elements are included, with no icons or extraneous components
-2. **Softness**: Rounded corners, pastel colors, and subtle transitions create a gentle feel
-3. **Clarity**: Clear color coding with strong contrast between background and text
-4. **Refinement**: Thoughtful attention to details like animation timing and hover states
-5. **Consistency**: Each notification type follows the same pattern with its own color scheme
-
-### Color System
-
-The Jade theme uses a dual-color system for each notification type:
-
-- **Background**: Very light, pastel version of the type color (e.g., very light green for success)
-- **Text/Accents**: More saturated version of the same color (e.g., medium green for success text)
-
-This approach maintains excellent readability while providing clear visual differentiation between notification types.
-
-### Animation
-
-The Jade theme features a refined entrance animation that combines scaling and movement:
-
-- Notifications fade in from invisible to fully visible
-- They move upward slightly from their initial position
-- They scale from 95% to 100% of their final size
-
-This combination creates a more organic, refined entrance than simple fades or slides, using a carefully tuned easing curve for a natural feel.
-
-### Dark Mode
-
-The theme automatically adapts to system dark mode preferences, with semi-transparent colored backgrounds that create a subtle glow effect:
-
-- Base text becomes lighter (#e2e8f0)
-- Backgrounds use semi-transparent colored overlays (15% opacity)
-- Hover states use white instead of black (10% white opacity)
-
-This creates a cohesive dark appearance that maintains the theme's calm aesthetic.
-
-### Accessibility Features
-
-The Jade theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query
-- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
-- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
-- **Button Labeling**: Close button has descriptive aria-label for screen readers
-
-## Browser Support
-
-The Jade theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-## Implementation Details
-
-The Jade theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **CSS Animations**: For refined entrance effects
-- **CSS Transitions**: For smooth hover interactions
-- **Progress Bar**: Shows countdown until notification dismissal
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
Message text
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/material.md b/docs/pages/themes/material.md
index 39f81435..de666705 100644
--- a/docs/pages/themes/material.md
+++ b/docs/pages/themes/material.md
@@ -1,159 +1,33 @@
---
+layout: theme
permalink: /theme/material/
title: Material Theme
+subtitle: Minimalist Material Design notifications
description: Add minimalist Material Design notifications to your application with the Material theme for PHPFlasher. Featuring clean cards, proper elevation, and interactive elements following Material guidelines.
-handler: theme.material
-data-controller: theme-material
----
+theme_name: theme.material
+theme_name_short: material
+theme_class: fl-material
+icon: fa-square
+color: indigo
+has_assets: true
-## Material Theme
+visual_features:
+ - Clean card design with proper Material Design elevation
+ - Minimalist appearance focusing entirely on message content
+ - Interactive elements with signature Material ripple effect
+ - Progress bar showing time until auto-dismiss
+ - Subtle slide-up entrance animation with Material motion curve
-The Material theme provides a minimalist implementation of Google's Material Design system for notifications. It features clean cards with proper elevation, Material Design typography, and interactive elements that follow Material guidelines, all without unnecessary visual elements to maintain focus on the message content.
+accessibility_features:
+ - ARIA roles specific to each notification type
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for users with motion sensitivity
+ - High contrast text meeting WCAG 2.1 AA standards
+ - Fully keyboard accessible with clear focus indicators
+ - Descriptive aria-labels for interactive elements
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Material theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.material', // Make Material the default theme
-
- 'themes' => [
- 'material' => [
- 'scripts' => [
- '/vendor/flasher/themes/material.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/material.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.material # Make Material the default theme
-
- themes:
- material:
- scripts:
- - '/vendor/flasher/themes/material.min.js'
- styles:
- - '/vendor/flasher/themes/material.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { materialTheme } from '@flasher/flasher/themes';
-flasher.addTheme('material', materialTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.material';
-
-// Or use it for specific notifications
-flasher.success('Operation completed successfully');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Material styling:
-
-{% assign successMessage = 'Operation completed successfully.' %}
-{% assign errorMessage = 'An error occurred during the operation.' %}
-{% assign warningMessage = 'This action cannot be undone.' %}
-{% assign infoMessage = 'New updates are available.' %}
-
-
-
-### PHP
-
-```php
-#/ material types
-
-// With Material set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Material set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Material Theme for Specific Notifications
-
-If Material isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.material')
- ->success('This notification uses Material theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.material').success('This notification uses Material theme.');
-```
-
-### Custom Colors and Appearance
-
-The Material theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--md-bg-light: #ffffff; /* Light mode background */
--md-bg-dark: #2d2d2d; /* Dark mode background */
@@ -173,136 +47,24 @@ The Material theme uses CSS variables that can be customized to match your brand
/* Animation timing */
--md-animation-duration: 0.3s; /* Entrance animation duration */
--md-ripple-duration: 0.6s; /* Button ripple effect duration */
-}
-```
+ }
-## HTML Structure
-
-The Material theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
-
Message text
-
-
-
-
-
-
-
-
-
-
-```
-
-This minimalist structure focuses on content by omitting unnecessary UI elements for a cleaner appearance.
-
-## Theme Features
-
-### Material Design Elements
-
-#### Elevation
-
-The theme uses proper Material Design elevation with three shadow components:
-
-1. **Umbra**: The darkest, sharpest shadow representing the main shadow
-2. **Penumbra**: The mid-tone, slightly softer shadow
-3. **Ambient**: The lightest, most diffuse shadow
-
-This creates the characteristic Material Design "floating" effect for cards.
-
-#### Typography
-
-Following Material Design typography guidelines:
-
-- **Message**: 14px (0.875rem), regular weight (400), 60% opacity for secondary text
-- **Button**: 13px (0.8125rem), medium weight (500), uppercase with letterSpacing
-
-#### Ripple Effect
-
-The theme includes Material Design's signature "ink ripple" effect:
-
-1. A small circle appears at the point of interaction
-2. The circle rapidly expands outward
-3. The effect fades out as it reaches full size
-
-This provides visual feedback that enhances the tactile feeling of the interface.
-
-### Animation Details
-
-The Material theme uses Material Design's standard motion curve (cubic-bezier(0.4, 0, 0.2, 1)) for its slide-up animation. This creates a natural-feeling motion that follows the principles of Material motion:
-
-- Quick acceleration from start
-- Smooth deceleration to end
-- Total duration of 300ms
-
-The theme also includes several interaction animations:
-
-1. **Button Hover**: Background color transition (200ms)
-2. **Button Press**: Ripple effect (600ms)
-3. **Progress Bar**: Linear progress animation
-
-### Differences from Google Theme
-
-While both the Material theme and Google theme follow Material Design guidelines, they differ in these key ways:
-
-1. **Minimalist Approach**: The Material theme omits icons entirely for a more streamlined appearance
-2. **Focus on Content**: With fewer visual elements, more focus is placed on the message text
-3. **Simplified Structure**: The HTML structure is more straightforward without icon containers
-
-### Dark Mode
-
-The Material theme implements Material Design's dark theme guidelines:
-
-- Dark surfaces (#2d2d2d)
-- Light text (87% white for primary, 60% white for secondary)
-- Adjusted shadows for better visibility on dark backgrounds
-- Higher contrast for hover states (8% opacity instead of 4%)
-
-### Accessibility Features
-
-The Material theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
-- **Keyboard Access**: Action button is fully keyboard accessible
-- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
-- **Text Alternatives**: Descriptive aria-labels for interactive elements
-
-## Browser Support
-
-The Material theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
-
-## Implementation Details
-
-The Material theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Material Design Elevation**: Proper shadow implementation for depth
-- **Ripple Animation**: For tactile button feedback
-- **CSS Animations**: With Material Design easing curves
-- **Linear Progress**: For countdown visualization
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
-
-For the best experience, it's recommended to include the Roboto font in your project:
-
-```html
-
-```
+html_structure: |
+
+
+
+
+
Message text
+
+
+
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/minimal.md b/docs/pages/themes/minimal.md
index 0ba76445..384652cf 100644
--- a/docs/pages/themes/minimal.md
+++ b/docs/pages/themes/minimal.md
@@ -1,159 +1,33 @@
---
+layout: theme
permalink: /theme/minimal/
title: Minimal Theme
+subtitle: Ultra-clean, distraction-free notification system
description: Enhance your application with ultra-clean, distraction-free notifications using the Minimal theme for PHPFlasher. Featuring a translucent design with subtle styling for unobtrusive messaging.
-handler: theme.minimal
-data-controller: theme-minimal
----
+theme_name: theme.minimal
+theme_name_short: minimal
+theme_class: fl-minimal
+icon: fa-minus
+color: gray
+has_assets: true
-## Minimal Theme
+visual_features:
+ - Ultra-clean design with minimal visual elements
+ - Subtle translucent background with frosted glass effect
+ - Small colored dot to indicate notification type
+ - Compact size and spacing for unobtrusive appearance
+ - System fonts for optimal native readability
-The Minimal theme provides an ultra-clean, distraction-free notification design that prioritizes simplicity and unobtrusiveness. With its compact dimensions, subtle visual styling, and reduced visual elements, this theme is perfect for applications where notifications should provide information without competing for attention with the main interface.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion adaptation for users with motion sensitivity
+ - Color indications that don't rely solely on color
+ - System fonts that respect user's platform for improved readability
+ - Fully keyboard accessible close button
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Minimal theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.minimal', // Make Minimal the default theme
-
- 'themes' => [
- 'minimal' => [
- 'scripts' => [
- '/vendor/flasher/themes/minimal.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/minimal.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.minimal # Make Minimal the default theme
-
- themes:
- minimal:
- scripts:
- - '/vendor/flasher/themes/minimal.min.js'
- styles:
- - '/vendor/flasher/themes/minimal.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { minimalTheme } from '@flasher/flasher/themes';
-flasher.addTheme('minimal', minimalTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.minimal';
-
-// Or use it for specific notifications
-flasher.success('Changes saved');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Minimal styling:
-
-{% assign successMessage = 'Changes saved.' %}
-{% assign errorMessage = 'Connection lost.' %}
-{% assign warningMessage = 'Low disk space.' %}
-{% assign infoMessage = 'Updates available.' %}
-
-
-
-### PHP
-
-```php
-#/ minimal types
-
-// With Minimal set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Minimal set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Minimal Theme for Specific Notifications
-
-If Minimal isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.minimal')
- ->success('This notification uses Minimal theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.minimal').success('This notification uses Minimal theme.');
-```
-
-### Custom Colors and Appearance
-
-The Minimal theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--minimal-bg-light: rgba(255, 255, 255, 0.8); /* Light mode background */
--minimal-bg-dark: rgba(25, 25, 25, 0.8); /* Dark mode background */
@@ -170,101 +44,17 @@ The Minimal theme uses CSS variables that can be customized to match your brand:
/* Additional customization */
--minimal-blur: 8px; /* Backdrop blur amount */
--minimal-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Shadow */
-}
-```
-
-## HTML Structure
-
-The Minimal theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
Message text
-
-
-
-
-
-
-```
-
-This structure is deliberately minimalist, with just a small colored dot to indicate notification type and a thin progress bar at the bottom.
-
-## Theme Features
-
-### Design Philosophy
-
-The Minimal theme embodies several key design principles:
-
-1. **Reduction**: Eliminating all non-essential visual elements
-2. **Unobtrusiveness**: Staying out of the way while delivering information
-3. **Clarity**: Maintaining excellent readability with system fonts
-4. **Subtlety**: Using transparency, small indicators, and minimal animation
-5. **Consistency**: Applying the same minimal approach to all aspects
-
-The theme deliberately avoids large icons, bold colors, or pronounced animations that might distract users from their primary tasks. The small colored dot provides just enough visual indication of the notification type without overwhelming the interface.
-
-### Visual Characteristics
-
-#### Frosted Glass Effect
-
-The theme uses a semi-transparent background (80% opacity) with an 8px backdrop blur, creating a subtle "frosted glass" effect that lets the underlying content partially show through.
-
-#### System Font Stack
-
-The theme uses the system UI font of the user's device (San Francisco on Apple devices, Segoe UI on Windows, etc.), ensuring that notifications look native to the platform.
-
-#### Compact Size and Spacing
-
-- **Max Width**: 320px
-- **Padding**: 0.75rem 1rem (12px 16px at default font size)
-- **Text Size**: 0.875rem (14px at default font size)
-- **Dot Size**: 8px diameter
-
-#### Quick Animation
-
-The entrance animation is intentionally brief (0.2s) and subtle, with just a small movement from above and fade-in effect.
-
-### Dark Mode
-
-The theme automatically adapts to system dark mode preferences, with a dark semi-transparent background and light text that maintains the minimal aesthetic while ensuring readability.
-
-### Accessibility Features
-
-The Minimal theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **Color Indications**: Uses color dots to indicate type without relying solely on color
-- **System Fonts**: Improved readability through native font rendering
-- **Adequate Contrast**: Maintains good contrast ratio between text and background
-
-## Browser Support
-
-The Minimal theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest) - falls back gracefully to semi-transparent background without blur
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-## Implementation Details
-
-The Minimal theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **Backdrop Filter**: For the subtle frosted glass effect
-- **System Font Stack**: For optimal readability with native fonts
-- **CSS Transitions**: For subtle hover effects
-- **CSS Animations**: For quick, minimal entrance animation
-- **Performance Optimization**: Uses `will-change: transform, opacity` for smooth animations
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times and minimal impact on application performance.
+ }
+html_structure: |
+
+
+
+
Message text
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/neon.md b/docs/pages/themes/neon.md
index f6869c49..0e906b2e 100644
--- a/docs/pages/themes/neon.md
+++ b/docs/pages/themes/neon.md
@@ -1,159 +1,33 @@
---
+layout: theme
permalink: /theme/neon/
title: Neon Theme
+subtitle: Elegant notifications with subtle glowing accents
description: Add elegant notifications with subtle glowing accents to your application using the Neon theme for PHPFlasher. Featuring frosted glass backgrounds, floating illuminated indicators, and refined typography.
-handler: theme.neon
-data-controller: theme-neon
----
+theme_name: theme.neon
+theme_name_short: neon
+theme_class: fl-neon
+icon: fa-lightbulb
+color: purple
+has_assets: true
-## Neon Theme
+visual_features:
+ - Distinctive floating indicator with subtle glow effect
+ - Frosted glass background with backdrop blur
+ - Gentle "breathing" animation for the glowing elements
+ - Refined entrance animation combining fade and movement
+ - Modern typography with clean, readable font
-The Neon theme provides elegant notifications with subtle glowing accents that evoke the gentle illumination of neon lights. It features a frosted glass background, floating illuminated indicators, and refined typography that come together to create a modern, sophisticated appearance.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option disables both entrance and glow animations
+ - Fully keyboard accessible close button with visual feedback
+ - Both color and position used to indicate notification type
+ - Sufficient contrast between text and background
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Neon theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.neon', // Make Neon the default theme
-
- 'themes' => [
- 'neon' => [
- 'scripts' => [
- '/vendor/flasher/themes/neon.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/neon.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.neon # Make Neon the default theme
-
- themes:
- neon:
- scripts:
- - '/vendor/flasher/themes/neon.min.js'
- styles:
- - '/vendor/flasher/themes/neon.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { neonTheme } from '@flasher/flasher/themes';
-flasher.addTheme('neon', neonTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.neon';
-
-// Or use it for specific notifications
-flasher.success('Your changes have been saved');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Neon styling:
-
-{% assign successMessage = 'Your changes have been saved successfully.' %}
-{% assign errorMessage = 'There was a problem saving your changes.' %}
-{% assign warningMessage = 'This action cannot be undone.' %}
-{% assign infoMessage = 'New features are available.' %}
-
-
-
-### PHP
-
-```php
-#/ neon types
-
-// With Neon set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Neon set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Neon Theme for Specific Notifications
-
-If Neon isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.neon')
- ->success('This notification uses Neon theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.neon').success('This notification uses Neon theme.');
-```
-
-### Custom Colors and Appearance
-
-The Neon theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--neon-bg-light: rgba(255, 255, 255, 0.9); /* Light mode background */
--neon-bg-dark: rgba(15, 23, 42, 0.9); /* Dark mode background */
@@ -170,110 +44,16 @@ The Neon theme uses CSS variables that can be customized to match your brand:
/* Glow properties */
--neon-glow-strength: 10px; /* How far the glow extends */
--neon-blur: 10px; /* Backdrop blur amount */
-}
-```
+ }
-## HTML Structure
-
-The Neon theme generates notifications with the following HTML structure:
-
-```html
-
-
-
Message text
-
-
-
-
-
-
-```
-
-The floating illuminated indicator is created using CSS pseudo-elements rather than being part of the HTML structure.
-
-## Theme Features
-
-### Floating Illuminated Indicator
-
-The Neon theme features a distinctive floating indicator that appears to hover above the notification with a subtle glow:
-
-1. **Container**: Positioned above the notification's top edge
-2. **Glow**: Applied using a filter drop-shadow with the notification type's color
-3. **Background**: Semi-transparent circle created with ::before pseudo-element
-4. **Center dot**: Solid-colored small dot created with ::after pseudo-element
-
-This layering creates the illusion of a floating, glowing dot that serves as a visual indicator of the notification type.
-
-### Animation Effects
-
-The Neon theme features two distinctive animations:
-
-#### Entrance Animation
-
-A combined animation creates a refined entrance where notifications:
-1. Fade in from invisible to fully visible
-2. Move downward slightly from above
-3. Transition from a blurred state to sharp focus
-
-#### Glow Animation
-
-A subtle "breathing" effect where the glow gently pulses, becoming slightly dimmer in the middle of the animation cycle before returning to full brightness.
-
-### Frosted Glass Effect
-
-The theme uses a semi-transparent background combined with backdrop-filter to create a frosted glass effect that gives notifications a modern, sophisticated appearance where they appear to float above the page with a subtle blur applied to content behind them.
-
-### Dark Mode
-
-The dark mode implementation maintains the glowing aesthetic while adjusting for low-light environments:
-
-- Dark slate semi-transparent background
-- Light colored text for better contrast
-- Stronger shadow for better depth perception
-- Adjusted hover state for the close button
-
-The glowing colors remain consistent between light and dark modes to maintain brand color recognition.
-
-### Accessibility Features
-
-The Neon theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables both entrance and glow animations
-- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
-- **Color Contrast**: Maintains sufficient contrast ratio between text and background
-- **Visual Indicators**: Uses both color and position to signal notification type
-
-## Browser Support
-
-The Neon theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-For browsers that don't support backdrop-filter (like Firefox), the theme gracefully degrades to using just the semi-transparent background without the blur effect.
-
-## Implementation Details
-
-The Neon theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **CSS Pseudo-elements**: For creating the floating indicator without extra HTML
-- **Backdrop Filter**: For the frosted glass effect
-- **Filter Effects**: For creating the glowing appearance
-- **CSS Animations**: For entrance and glow pulsing effects
-- **Typography**: Uses Inter font (with fallbacks) for a clean, modern look
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
-
-For the best experience with the Neon theme, it's recommended to include the Inter font in your project:
-
-```html
-
-```
+html_structure: |
+
+
+
Message text
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/onyx.md b/docs/pages/themes/onyx.md
index 542bf10e..f664726c 100644
--- a/docs/pages/themes/onyx.md
+++ b/docs/pages/themes/onyx.md
@@ -1,159 +1,33 @@
---
+layout: theme
permalink: /theme/onyx/
title: Onyx Theme
+subtitle: Modern, floating notifications with elegant details
description: Add modern, floating notifications to your application with the Onyx theme for PHPFlasher. Featuring elegant shadows, colored corner dots, and smooth animations for a sophisticated appearance.
-handler: theme.onyx
-data-controller: theme-onyx
----
+theme_name: theme.onyx
+theme_name_short: onyx
+theme_class: fl-onyx
+icon: fa-gem
+color: black
+has_assets: true
-## Onyx Theme
+visual_features:
+ - Sophisticated floating card design with elegant shadows
+ - Distinctive colored accent dots in corners to indicate notification type
+ - Clean, minimalist appearance focusing on content clarity
+ - Refined entrance animation combining fade, movement and focus effects
+ - Generous spacing and rounded corners (1rem radius) for a contemporary look
-The Onyx theme provides modern, floating notifications with a clean design and subtle accent elements. It features elegant shadows, colored corner dots indicating notification type, and smooth animations to create a sophisticated, contemporary appearance that integrates well with modern interfaces.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for users with motion sensitivity
+ - Colored dots provide type indication without relying solely on color
+ - Fully keyboard accessible close button with visual feedback
+ - High contrast between text and background in both light and dark modes
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Onyx theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.onyx', // Make Onyx the default theme
-
- 'themes' => [
- 'onyx' => [
- 'scripts' => [
- '/vendor/flasher/themes/onyx.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/onyx.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.onyx # Make Onyx the default theme
-
- themes:
- onyx:
- scripts:
- - '/vendor/flasher/themes/onyx.min.js'
- styles:
- - '/vendor/flasher/themes/onyx.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { onyxTheme } from '@flasher/flasher/themes';
-flasher.addTheme('onyx', onyxTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.onyx';
-
-// Or use it for specific notifications
-flasher.success('Your changes have been saved');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Onyx styling:
-
-{% assign successMessage = 'Your changes have been saved successfully.' %}
-{% assign errorMessage = 'There was a problem saving your changes.' %}
-{% assign warningMessage = 'This action cannot be undone.' %}
-{% assign infoMessage = 'New features are available.' %}
-
-
-
-### PHP
-
-```php
-#/ onyx types
-
-// With Onyx set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Onyx set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Onyx Theme for Specific Notifications
-
-If Onyx isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.onyx')
- ->success('This notification uses Onyx theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.onyx').success('This notification uses Onyx theme.');
-```
-
-### Custom Colors and Appearance
-
-The Onyx theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--onyx-bg-light: #ffffff; /* Light mode background */
--onyx-bg-dark: #1e1e1e; /* Dark mode background */
@@ -168,107 +42,18 @@ The Onyx theme uses CSS variables that can be customized to match your brand:
--onyx-info: #3b82f6; /* Info color */
--onyx-warning: #f59e0b; /* Warning color */
--onyx-error: #ef4444; /* Error color */
-}
-```
+ }
-## HTML Structure
-
-The Onyx theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
Message text
-
-
-
-
-
-
-
-```
-
-The accent dots are created using CSS pseudo-elements (`::before` and `::after`) rather than being part of the HTML structure.
-
-## Theme Features
-
-### Design Philosophy
-
-The Onyx theme embodies several design principles:
-
-1. **Elegance**: Clean, sophisticated appearance with subtle details
-2. **Minimalism**: Only essential elements are included, with no icons or extraneous components
-3. **Focus**: The clean design keeps attention on the message content
-4. **Refinement**: Thoughtful attention to details like animation timing and corner dots
-5. **Consistency**: Each notification type follows the same pattern with its own accent color
-
-### Accent Dots Design
-
-One of the distinctive features of the Onyx theme is its use of subtle accent dots in the corners:
-
-- **Top-left dot**: Positioned 10px from the top and left edges
-- **Bottom-right dot**: Positioned 10px from the bottom and right edges
-- **Small size**: Each dot is just 6px in diameter
-- **Type-specific colors**: The dots match the color associated with the notification type
-
-These small visual elements provide a subtle but clear indication of the notification type without requiring large icons or colored backgrounds.
-
-### Animation Effects
-
-The Onyx theme features a sophisticated entrance animation that combines multiple effects:
-
-- Notifications fade in from invisible to fully visible
-- They move upward slightly from below their final position
-- They transition from a blurred state to sharp focus
-
-The animation uses a carefully crafted easing curve for a natural, refined movement.
-
-### Dark Mode
-
-The dark mode implementation maintains the sophisticated aesthetic while adjusting for low-light environments:
-
-- Dark background (#1e1e1e)
-- Light text color (#f5f5f5)
-- Deeper shadow for enhanced depth perception
-- Adjusted hover state for the close button using white opacity
-
-The accent dot colors remain consistent between light and dark modes to maintain brand color recognition.
-
-### Accessibility Features
-
-The Onyx theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables entrance animation
-- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
-- **Color Indicators**: Uses colored dots to indicate type without relying solely on color for meaning
-- **Adequate Contrast**: Ensures good contrast between text and background in both light and dark modes
-
-## Browser Support
-
-The Onyx theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-No special polyfills or fallbacks are required as the theme uses standard CSS features that are well-supported across browsers.
-
-## Implementation Details
-
-The Onyx theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **CSS Pseudo-elements**: For creating the accent dots without extra HTML
-- **Box Shadows**: For the floating card appearance
-- **CSS Animations**: For refined entrance effects combining movement and blur
-- **CSS Transitions**: For smooth hover interactions
-- **Progress Bar**: Shows countdown until notification dismissal with type-specific colors
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
+
Message text
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/ruby.md b/docs/pages/themes/ruby.md
index 0653fe65..1a3eb52a 100644
--- a/docs/pages/themes/ruby.md
+++ b/docs/pages/themes/ruby.md
@@ -1,159 +1,33 @@
---
+layout: theme
permalink: /theme/ruby/
title: Ruby Theme
+subtitle: Vibrant gradient notifications with shine effect
description: Add vibrant notifications with rich gradient backgrounds to your application using the Ruby theme for PHPFlasher. Featuring an elegant shine animation, circular icons, and gemstone-like appearance.
-handler: theme.ruby
-data-controller: theme-ruby
----
+theme_name: theme.ruby
+theme_name_short: ruby
+theme_class: fl-ruby
+icon: fa-gem
+color: red
+has_assets: true
-## Ruby Theme
+visual_features:
+ - Rich diagonal gradient backgrounds in vibrant colors
+ - Distinctive shine animation mimicking light reflecting off gemstone surfaces
+ - Circular translucent icon containers for clear notification type identification
+ - Smooth entrance animation with scale and fade effects
+ - Sophisticated shadow treatment for depth and premium feel
-The Ruby theme provides vibrant notifications with rich gradient backgrounds and a distinctive gemstone-like appearance. It features an elegant shine animation that mimics light reflecting off a precious stone, along with circular icon containers and smooth animations to create a premium, eye-catching visual experience.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option disables shine animation and entrance effects
+ - High contrast white text on colored backgrounds
+ - Fully keyboard accessible controls with visual feedback
+ - Complete RTL language support with directional adjustments
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Ruby theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.ruby', // Make Ruby the default theme
-
- 'themes' => [
- 'ruby' => [
- 'scripts' => [
- '/vendor/flasher/themes/ruby.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/ruby.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.ruby # Make Ruby the default theme
-
- themes:
- ruby:
- scripts:
- - '/vendor/flasher/themes/ruby.min.js'
- styles:
- - '/vendor/flasher/themes/ruby.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { rubyTheme } from '@flasher/flasher/themes';
-flasher.addTheme('ruby', rubyTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.ruby';
-
-// Or use it for specific notifications
-flasher.success('Your changes have been saved');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Ruby styling:
-
-{% assign successMessage = 'Your changes have been saved successfully.' %}
-{% assign errorMessage = 'There was a problem saving your changes.' %}
-{% assign warningMessage = 'This action cannot be undone.' %}
-{% assign infoMessage = 'New features are available.' %}
-
-
-
-### PHP
-
-```php
-#/ ruby types
-
-// With Ruby set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Ruby set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Ruby Theme for Specific Notifications
-
-If Ruby isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.ruby')
- ->success('This notification uses Ruby theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.ruby').success('This notification uses Ruby theme.');
-```
-
-### Custom Colors and Appearance
-
-The Ruby theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--ruby-text: #ffffff; /* Text color */
--ruby-border-radius: 1.125rem; /* Corner roundness */
@@ -164,119 +38,22 @@ The Ruby theme uses CSS variables that can be customized to match your brand:
--ruby-info-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); /* Info */
--ruby-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); /* Warning */
--ruby-error-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); /* Error */
-}
-```
+ }
-## HTML Structure
-
-The Ruby theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
-
-
-
-
Message text
-
-
-
-
-
-
-
-```
-
-This structure includes the shine element that creates the gemstone-like reflection animation and the circular icon container that's distinctive to this theme.
-
-## Theme Features
-
-### Gradient Design
-
-The theme uses rich, vibrant gradients that flow from a deeper shade to a brighter one:
-
-- **Success**: Green gradient from #059669 to #10b981
-- **Info**: Blue gradient from #2563eb to #3b82f6
-- **Warning**: Amber gradient from #d97706 to #f59e0b
-- **Error**: Red gradient from #b91c1c to #ef4444
-
-All gradients are angled at 135 degrees, creating a consistent diagonal flow across all notification types.
-
-### Shine Animation
-
-The Ruby theme features a distinctive shine animation that mimics light reflecting off a gemstone surface:
-
-- A moving highlight travels across the notification from left to right
-- The effect is angled with a skew transform
-- Uses a semi-transparent white gradient
-- Repeats every 6 seconds after an initial 1-second delay
-- Fades out at the end of each cycle
-
-This animation adds a premium, dynamic quality to the notifications that draws the user's attention.
-
-### Circular Icon Container
-
-The circular icon container uses:
-- Semi-transparent white background (25% opacity)
-- Perfect circular shape (border-radius: 50%)
-- 36px diameter (2.25rem)
-- Centered icon with white color
-
-This creates a subtle but distinctive visual element that helps identify the notification type.
-
-### Animation Effects
-
-In addition to the shine animation, the Ruby theme includes:
-
-- **Entrance Animation**: A smooth scale-up from 96% to 100% combined with a fade-in
-- **Close Button Interactions**: Scale and opacity changes on hover
-- **Progress Bar Animation**: A fluid countdown indicator
-
-### Design Philosophy
-
-The Ruby theme embodies a premium, attention-grabbing design philosophy:
-1. **Vibrance**: Rich, saturated colors that stand out
-2. **Movement**: Dynamic shine animation that draws the eye
-3. **Depth**: Shadows and translucent elements create a layered appearance
-4. **Polish**: Refined animations and hover states reflect a premium quality
-5. **Legibility**: Despite the colorful backgrounds, text remains highly readable
-
-### Accessibility Features
-
-The Ruby theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query by disabling animations and shine effect
-- **Color Contrast**: White text (#ffffff) on colored backgrounds meets WCAG 2.1 AA contrast requirements
-- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
-- **RTL Support**: Complete right-to-left language support with appropriate directional adjustments
-
-## Browser Support
-
-The Ruby theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-The gradient backgrounds and animations are well-supported across modern browsers, requiring no special fallbacks.
-
-## Implementation Details
-
-The Ruby theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization
-- **CSS Gradients**: For rich, vibrant backgrounds
-- **CSS Animations**: For shine effect and entrance animations
-- **CSS Transitions**: For smooth hover interactions
-- **Box Shadows**: For depth and premium feel
-- **SVG Icons**: For crisp, scalable notification type indicators
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
+html_structure: |
+
+
+
+
+
+
+
+
Message text
+
+
+
+
+
+
+
+---
diff --git a/docs/pages/themes/sapphire.md b/docs/pages/themes/sapphire.md
index b5275f12..7c90d64b 100644
--- a/docs/pages/themes/sapphire.md
+++ b/docs/pages/themes/sapphire.md
@@ -1,159 +1,33 @@
---
+layout: theme
permalink: /theme/sapphire/
title: Sapphire Theme
+subtitle: Modern, glassmorphic notification system
description: Add modern, glassmorphic notifications to your application with the Sapphire theme for PHPFlasher. Featuring a blurred backdrop effect, minimal interface, and subtle animations.
-handler: theme.sapphire
-data-controller: theme-sapphire
----
+theme_name: theme.sapphire
+theme_name_short: sapphire
+theme_class: fl-sapphire
+icon: fa-gem
+color: blue
+has_assets: true
-## Sapphire Theme
+visual_features:
+ - Frosted glass effect with semi-transparent backgrounds and backdrop blur
+ - Ultra-minimal interface without close buttons or icons
+ - Distinctive bounce animation for a more dynamic entrance
+ - Type-specific colored backgrounds with consistent visual language
+ - Progress bar showing time until auto-dismissal
-The Sapphire theme provides modern, glassmorphic notifications with a blurred backdrop effect. It features a clean, minimal design that emphasizes simplicity and contemporary aesthetics, with semi-transparent colored backgrounds and subtle animations that create a sophisticated, unobtrusive appearance.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for users with motion sensitivity
+ - High contrast between text and all background colors
+ - Complete RTL language support
+ - Auto-dismissal with visual progress indicator
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Sapphire theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.sapphire', // Make Sapphire the default theme
-
- 'themes' => [
- 'sapphire' => [
- 'scripts' => [
- '/vendor/flasher/themes/sapphire.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/sapphire.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.sapphire # Make Sapphire the default theme
-
- themes:
- sapphire:
- scripts:
- - '/vendor/flasher/themes/sapphire.min.js'
- styles:
- - '/vendor/flasher/themes/sapphire.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { sapphireTheme } from '@flasher/flasher/themes';
-flasher.addTheme('sapphire', sapphireTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.sapphire';
-
-// Or use it for specific notifications
-flasher.success('Your changes have been saved');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Sapphire styling:
-
-{% assign successMessage = 'Your changes have been saved successfully.' %}
-{% assign errorMessage = 'There was a problem saving your changes.' %}
-{% assign warningMessage = 'This action cannot be undone.' %}
-{% assign infoMessage = 'New features are available.' %}
-
-
-
-### PHP
-
-```php
-#/ sapphire types
-
-// With Sapphire set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Sapphire set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Sapphire Theme for Specific Notifications
-
-If Sapphire isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.sapphire')
- ->success('This notification uses Sapphire theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.sapphire').success('This notification uses Sapphire theme.');
-```
-
-### Custom Colors and Appearance
-
-The Sapphire theme uses CSS variables that can be customized to match your brand:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--sapphire-bg-base: rgba(30, 30, 30, 0.9); /* Base background color */
--sapphire-text: #f0f0f0; /* Text color */
@@ -170,105 +44,15 @@ The Sapphire theme uses CSS variables that can be customized to match your brand
--sapphire-error: rgba(239, 68, 68, 0.95); /* Error color */
--sapphire-warning: rgba(245, 158, 11, 0.95); /* Warning color */
--sapphire-info: rgba(59, 130, 246, 0.95); /* Info color */
-}
-```
+ }
-## HTML Structure
-
-The Sapphire theme generates notifications with the following HTML structure:
-
-```html
-
-
- Message text
-
-
-
-
-
-```
-
-Note that unlike most themes, Sapphire intentionally omits a close button and icons for a more streamlined appearance.
-
-## Theme Features
-
-### Glassmorphic Design
-
-The Sapphire theme implements the popular glassmorphism design trend with a semi-transparent background and backdrop blur that creates a frosted glass effect where:
-
-- The notification background is semi-transparent
-- Content behind the notification appears blurred
-- The effect creates depth and visual interest
-- The notification feels like it's floating above the content
-
-### Minimalist Approach
-
-Unlike many notification themes, Sapphire takes a distinctly minimalist approach:
-
-- No close button (notifications auto-dismiss)
-- No icons or visual indicators beyond color
-- Clean typography with minimal styling
-- Focus purely on the message content
-- Subtle progress indicator
-
-This approach reduces visual noise and creates a more elegant, unobtrusive notification experience.
-
-### Animation Effects
-
-The Sapphire theme features a distinctive bounce animation for a more dynamic entrance where notifications:
-
-1. Fade in from invisible to fully visible
-2. Move upward from below their final position
-3. Slightly overshoot their target position before settling (bounce effect)
-
-The animation uses a carefully tuned easing curve that enhances the natural feel of the motion.
-
-### Color System
-
-The theme uses a sophisticated color system:
-
-- High transparency backgrounds (95% opacity)
-- Type-specific colors that maintain a consistent visual language
-- Light text (#f0f0f0) for excellent contrast on all background colors
-- Semi-transparent progress indicator that works across all notification types
-
-### Accessibility Features
-
-The Sapphire theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
-- **Color Contrast**: Ensures good contrast between text and all background colors
-- **RTL Support**: Complete right-to-left language support
-
-## Browser Support
-
-The Sapphire theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-For browsers that don't support backdrop-filter (like older Firefox versions), the theme gracefully degrades to using just the semi-transparent background without the blur effect.
-
-## Implementation Details
-
-The Sapphire theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization
-- **Backdrop Filter**: For the frosted glass effect
-- **CSS Animations**: For the bounce entrance effect
-- **CSS Transitions**: For smooth progress bar animation
-- **Media Queries**: For responsive design and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
-
-For the best experience with the Sapphire theme, it's recommended to include the Roboto font in your project:
-
-```html
-
-```
+html_structure: |
+
+
+ Message text
+
+
+
+
+
+---
diff --git a/docs/pages/themes/slack.md b/docs/pages/themes/slack.md
index 2337ed75..6612360a 100644
--- a/docs/pages/themes/slack.md
+++ b/docs/pages/themes/slack.md
@@ -1,159 +1,34 @@
---
+layout: theme
permalink: /theme/slack/
title: Slack Theme
+subtitle: Familiar workspace messaging style
description: Add Slack-style notifications to your application with the Slack theme for PHPFlasher. Featuring message bubbles with colored avatars, clean typography, and interactive hover effects.
-handler: theme.slack
-data-controller: theme-slack
----
+theme_name: theme.slack
+theme_name_short: slack
+theme_class: fl-slack
+icon: fa-slack
+color: purple
+has_assets: true
-## Slack Theme
+visual_features:
+ - Message bubble design with subtle borders and shadow effects
+ - Colored square avatars with notification type symbols
+ - Clean typography mimicking Slack's font styling
+ - Interactive close button that appears on hover
+ - Consistent styling between notification types with color-coded avatars
-The Slack theme provides notifications styled after Slack's familiar messaging interface. It features message bubbles with colored avatars, clean typography, and interactive hover effects that closely resemble the appearance and behavior of messages in the popular workplace communication platform.
+accessibility_features:
+ - Type-specific ARIA roles for screen readers
+ - Appropriate aria-live regions based on message importance
+ - Reduced motion option for users with motion sensitivity
+ - Fully keyboard accessible close button
+ - Multiple indicators (color and symbol) for notification types
+ - High contrast text in both light and dark modes
+ - Complete RTL language support with properly flipped layout
-> **Note:**
-> New to PHPFlasher? Check the [installation guide](/installation/) first.
-
-## Setup
-
-The easiest way to use the Slack theme is to set it as your **default theme**:
-
-### Laravel
-
-```php
- 'theme.slack', // Make Slack the default theme
-
- 'themes' => [
- 'slack' => [
- 'scripts' => [
- '/vendor/flasher/themes/slack.min.js',
- ],
- 'styles' => [
- '/vendor/flasher/themes/slack.min.css',
- ],
- ],
- ],
-];
-```
-
-### Symfony
-
-```yaml
-# config/packages/flasher.yaml
-
-flasher:
- default: theme.slack # Make Slack the default theme
-
- themes:
- slack:
- scripts:
- - '/vendor/flasher/themes/slack.min.js'
- styles:
- - '/vendor/flasher/themes/slack.min.css'
-```
-
-### JavaScript/TypeScript
-
-```typescript
-// Import the theme (if not auto-registered)
-import { slackTheme } from '@flasher/flasher/themes';
-flasher.addTheme('slack', slackTheme);
-
-// Set as default theme
-flasher.defaultPlugin = 'theme.slack';
-
-// Or use it for specific notifications
-flasher.success('Your file was uploaded successfully');
-```
-
-## Notification Types
-
-Once configured, use standard PHPFlasher methods to create notifications with Slack styling:
-
-{% assign successMessage = 'Your file was uploaded successfully.' %}
-{% assign errorMessage = 'Unable to connect to the server.' %}
-{% assign warningMessage = 'Your session will expire soon.' %}
-{% assign infoMessage = 'New comments on your post.' %}
-
-
-
-### PHP
-
-```php
-#/ slack types
-
-// With Slack set as default theme
-flash()->success('{{ successMessage }}');
-flash()->error('{{ errorMessage }}');
-flash()->warning('{{ warningMessage }}');
-flash()->info('{{ infoMessage }}');
-```
-
-### JavaScript
-
-```javascript
-// With Slack set as default theme
-flasher.success('{{ successMessage }}');
-flasher.error('{{ errorMessage }}');
-flasher.warning('{{ warningMessage }}');
-flasher.info('{{ infoMessage }}');
-```
-
-## Customization
-
-### Using Slack Theme for Specific Notifications
-
-If Slack isn't your default theme, you can use it for specific notifications:
-
-#### PHP
-
-```php
-flash()
- ->use('theme.slack')
- ->success('This notification uses Slack theme.');
-```
-
-#### JavaScript
-
-```javascript
-flasher.use('theme.slack').success('This notification uses Slack theme.');
-```
-
-### Custom Colors and Appearance
-
-The Slack theme uses CSS variables that can be customized to match your brand while maintaining the Slack-like appearance:
-
-```css
-:root {
+css_variables: |
+ :root {
/* Base appearance */
--slack-bg-light: #ffffff; /* Light mode background */
--slack-bg-dark: #1a1d21; /* Dark mode background */
@@ -168,128 +43,22 @@ The Slack theme uses CSS variables that can be customized to match your brand wh
--slack-info: #1264a3; /* Info avatar color */
--slack-warning: #e8912d; /* Warning avatar color */
--slack-error: #e01e5a; /* Error avatar color */
-}
-```
+ }
-## HTML Structure
-
-The Slack theme generates notifications with the following HTML structure:
-
-```html
-
-
-
-
[Symbol]
-
-
-
Message text
-
-
-
-
-
-
-```
-
-This structure mirrors Slack's message layout with an avatar container, message content, and action button.
-
-## Theme Features
-
-### Message Bubble Design
-
-The main container follows Slack's message styling:
-- White background (#ffffff) in light mode
-- Dark background (#1a1d21) in dark mode
-- Subtle border (1px solid #e0e0e0)
-- Slight bottom shadow for depth (0 1px 0 rgba(0, 0, 0, 0.1))
-- Subtle hover state (#f8f8f8)
-- 4px border radius
-
-### Avatar Design
-
-Each notification type has a colored square avatar:
-- Success: Green (#2bac76) with ✓ symbol
-- Error: Pink/Red (#e01e5a) with ✕ symbol
-- Warning: Orange (#e8912d) with ! symbol
-- Info: Blue (#1264a3) with i symbol
-
-The avatars are 36px × 36px squares with slightly rounded corners (4px border radius).
-
-### Interactive Elements
-
-The close button appears on hover:
-- Initially hidden (opacity: 0, visibility: hidden)
-- Fades in when hovering over the message
-- Uses Slack's "X" SVG icon
-- Changes color on hover (from #616061 to #1d1c1d)
-- Has a subtle background on hover (#f8f8f8)
-
-### Animation Effects
-
-The theme uses a simple, quick fade-in animation:
-- Duration: 150ms (matches Slack's quick, responsive feel)
-- Timing function: ease-out
-- Effect: Simple opacity change from 0 to 1
-
-### Typography
-
-The theme uses Slack's typography style:
-- Font family: Lato, Slack-Lato, Helvetica Neue, Helvetica, sans-serif
-- Font size: 15px for message text
-- Line height: 1.46668 (Slack's specific line height)
-- Text color: Near black (#1d1c1d) in light mode, off-white (#e0e0e0) in dark mode
-
-### Dark Mode
-
-The dark mode implementation closely matches Slack's dark theme:
-- Background: #1a1d21 (Slack's dark mode color)
-- Text: #e0e0e0 (light gray)
-- Border: #393a3e (dark gray)
-- Hover background: #222529 (slightly lighter than the background)
-
-The avatar colors remain consistent between light and dark modes to maintain clear visual indicators.
-
-### Accessibility Features
-
-The Slack theme includes several accessibility features:
-
-- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
-- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
-- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
-- **Keyboard Access**: Close button is fully keyboard accessible
-- **Color Indicators**: Each notification type has its own color, but also includes a symbol
-- **Text Contrast**: Maintains good contrast ratios in both light and dark modes
-- **RTL Support**: Complete right-to-left language support with properly flipped layout
-
-## Browser Support
-
-The Slack theme is compatible with all modern browsers:
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Opera (latest)
-- Mobile browsers on iOS and Android
-
-The theme uses standard CSS features that are well-supported across browsers, ensuring a consistent experience for all users.
-
-## Implementation Details
-
-The Slack theme uses modern web technologies:
-
-- **CSS Variables**: For theme customization and dark mode support
-- **CSS Flexbox**: For proper message layout and alignment
-- **CSS Transitions**: For smooth hover interactions
-- **SVG Icons**: For the close button and notification type indicators
-- **Media Queries**: For responsive design, dark mode, and reduced motion support
-
-All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
-
-For the best experience with the Slack theme, it's recommended to include the Lato font in your project:
-
-```html
-
-```
+html_structure: |
+