diff --git a/src/Noty/Prime/Resources/assets/index.ts b/src/Noty/Prime/Resources/assets/index.ts index f4519970..274cc2ea 100644 --- a/src/Noty/Prime/Resources/assets/index.ts +++ b/src/Noty/Prime/Resources/assets/index.ts @@ -1,38 +1,7 @@ -/** - * @file Noty Plugin Entry Point - * @description Registers the Noty plugin with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '@flasher/flasher' import NotyPlugin from './noty' -/** - * Create and register the Noty plugin with PHPFlasher. - * - * This enables using Noty for displaying notifications through - * the PHPFlasher API. - * - * @example - * ```typescript - * // With the plugin already registered - * import flasher from '@flasher/flasher'; - * - * flasher.use('noty').success('Operation completed'); - * ``` - */ const noty = new NotyPlugin() flasher.addPlugin('noty', noty) -/** - * Export the Noty plugin instance. - * - * This allows direct access to the plugin if needed. - * - * @example - * ```typescript - * import noty from '@flasher/flasher-noty'; - * - * noty.success('Operation completed'); - * ``` - */ export default noty diff --git a/src/Notyf/Prime/Resources/assets/index.ts b/src/Notyf/Prime/Resources/assets/index.ts index 27dae429..49ba1acf 100644 --- a/src/Notyf/Prime/Resources/assets/index.ts +++ b/src/Notyf/Prime/Resources/assets/index.ts @@ -1,47 +1,9 @@ -/** - * @file Notyf Plugin Entry Point - * @description Registers the Notyf plugin with PHPFlasher - * @author Younes ENNAJI - */ import './notyf.scss' import flasher from '@flasher/flasher' import NotyfPlugin from './notyf' -/** - * Create and register the Notyf plugin with PHPFlasher. - * - * This enables using Notyf for displaying notifications through - * the PHPFlasher API. - * - * @example - * ```typescript - * // With the plugin already registered - * import flasher from '@flasher/flasher'; - * - * flasher.use('notyf').success('Operation completed'); - * - * // With custom options - * flasher.use('notyf').info('This notification has custom options', null, { - * duration: 3000, - * ripple: true, - * dismissible: true - * }); - * ``` - */ const notyf = new NotyfPlugin() flasher.addPlugin('notyf', notyf) -/** - * Export the Notyf plugin instance. - * - * This allows direct access to the plugin if needed. - * - * @example - * ```typescript - * import notyf from '@flasher/flasher-notyf'; - * - * notyf.success('Operation completed'); - * ``` - */ export default notyf diff --git a/src/Notyf/Prime/Resources/assets/notyf.scss b/src/Notyf/Prime/Resources/assets/notyf.scss index e0f5ddfd..4e52c93e 100644 --- a/src/Notyf/Prime/Resources/assets/notyf.scss +++ b/src/Notyf/Prime/Resources/assets/notyf.scss @@ -1,15 +1,4 @@ -/** - * Notyf custom styles for PHPFlasher - * - * These styles define custom icons for additional notification types - * (info and warning) beyond the default success and error types - * provided by Notyf. - * - * @author Younes ENNAJI - */ - .notyf { - // Common styles for custom icons &__icon { &--warning, &--info { @@ -32,7 +21,6 @@ } } - // Info icon (i) &--info { &::before, &::after { @@ -43,13 +31,11 @@ transform: translateX(-50%); } - // Vertical line &::before { top: 0.4em; height: 0.38em; } - // Dot and shadow &::after { top: 0.21em; height: 0.13em; @@ -57,7 +43,6 @@ } } - // Warning icon (!) &--warning { &::before, &::after { @@ -68,13 +53,11 @@ transform: translateX(-50%); } - // Exclamation vertical line &::before { top: 0.21em; height: 0.38em; } - // Exclamation dot &::after { top: 0.65em; height: 0.13em; diff --git a/src/Notyf/Prime/Resources/assets/notyf.ts b/src/Notyf/Prime/Resources/assets/notyf.ts index 54e89f9a..b609f630 100644 --- a/src/Notyf/Prime/Resources/assets/notyf.ts +++ b/src/Notyf/Prime/Resources/assets/notyf.ts @@ -1,8 +1,3 @@ -/** - * @file Notyf Plugin Implementation - * @description PHPFlasher integration with the Notyf notification library - * @author Younes ENNAJI - */ import { AbstractPlugin } from '@flasher/flasher/dist/plugin' import type { Envelope, Options } from '@flasher/flasher/dist/types' @@ -10,41 +5,9 @@ import { Notyf } from 'notyf' import type { INotyfOptions } from 'notyf/notyf.options' import 'notyf/notyf.min.css' -/** - * Plugin implementation for Notyf notification library. - * - * The NotyfPlugin integrates the lightweight Notyf library with PHPFlasher, - * allowing for simple, responsive, and customizable toast notifications. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import NotyfPlugin from '@flasher/flasher-notyf'; - * - * // Register the plugin - * flasher.addPlugin('notyf', new NotyfPlugin()); - * - * // Show a notification - * flasher.use('notyf').success('Operation completed'); - * ``` - */ export default class NotyfPlugin extends AbstractPlugin { - /** - * The Notyf instance used to display notifications. - * Lazy-initialized when first needed. - * - * @private - */ private notyf?: Notyf - /** - * Creates Notyf notifications from envelopes. - * - * This method transforms PHPFlasher envelopes into Notyf notifications - * and displays them using the Notyf library. - * - * @param envelopes - Array of notification envelopes to render - */ public renderEnvelopes(envelopes: Envelope[]): void { if (!this.notyf) { this.initializeNotyf() @@ -52,7 +15,6 @@ export default class NotyfPlugin extends AbstractPlugin { envelopes.forEach((envelope) => { try { - // Merge envelope properties with its options for Notyf compatibility const options = { ...envelope, ...envelope.options } this.notyf?.open(options) } catch (error) { @@ -60,13 +22,9 @@ export default class NotyfPlugin extends AbstractPlugin { } }) - // Ensure compatibility with Turbo/Hotwire by marking containers - // as temporary elements that should be preserved during page transitions try { if (this.notyf) { - // @ts-expect-error - Accessing internal Notyf properties const container = this.notyf.view.container - // @ts-expect-error - Accessing internal Notyf properties const a11yContainer = this.notyf.view.a11yContainer if (container && container.dataset) { @@ -82,81 +40,52 @@ export default class NotyfPlugin extends AbstractPlugin { } } - /** - * Apply global options to Notyf. - * - * This method configures the Notyf library with the provided options, - * which will affect all subsequently created notifications. It also - * adds support for additional notification types beyond the default - * success and error types. - * - * @param options - Configuration options for Notyf - */ public renderOptions(options: Options): void { if (!options) { return } const notyfOptions = { - duration: options.duration || 10000, // Default timeout of 10 seconds + duration: options.duration || 10000, ...options, } as unknown as INotyfOptions - // Initialize types array if not present notyfOptions.types = notyfOptions.types || [] - // Add support for info notifications with custom icon this.addTypeIfNotExists(notyfOptions.types, { type: 'info', className: 'notyf__toast--info', - background: '#5784E5', // Blue color + background: '#5784E5', icon: { className: 'notyf__icon--info', tagName: 'i', }, }) - // Add support for warning notifications with custom icon this.addTypeIfNotExists(notyfOptions.types, { type: 'warning', className: 'notyf__toast--warning', - background: '#E3A008', // Amber color + background: '#E3A008', icon: { className: 'notyf__icon--warning', tagName: 'i', }, }) - // Create or update Notyf instance with new options this.notyf = this.notyf || new Notyf(notyfOptions) } - /** - * Initialize the Notyf instance with default options if not already created. - * - * @private - */ private initializeNotyf(): void { if (!this.notyf) { - // Default configuration with info and warning types this.renderOptions({ - duration: 10000, // 10 seconds + duration: 10000, position: { x: 'right', y: 'top' }, dismissible: true, }) } } - /** - * Add a notification type to Notyf if it doesn't already exist. - * Prevents duplicate type definitions. - * - * @param types - Array of notification types - * @param newType - New type to add - * @private - */ private addTypeIfNotExists(types: any[], newType: any): void { - // Check if type already exists const exists = types.some((type) => type.type === newType.type) if (!exists) { types.push(newType) diff --git a/src/Prime/Resources/assets/exports.ts b/src/Prime/Resources/assets/exports.ts index 1938b94b..99f44e5d 100644 --- a/src/Prime/Resources/assets/exports.ts +++ b/src/Prime/Resources/assets/exports.ts @@ -1,56 +1,4 @@ -/** - * @file PHPFlasher Type Exports - * @description Re-exports types and interfaces for TypeScript users - * @author Younes ENNAJI - */ - -/** - * Re-export all types and interfaces. - * - * This allows TypeScript users to import specific types: - * - * @example - * ```typescript - * import { Options, Envelope } from '@flasher/flasher/exports'; - * ``` - */ export * from './types' - -/** - * Re-export the AbstractPlugin class. - * - * This is useful for creating custom plugins. - * - * @example - * ```typescript - * import { AbstractPlugin } from '@flasher/flasher/exports'; - * - * class MyPlugin extends AbstractPlugin { - * // Implementation - * } - * ``` - */ export { AbstractPlugin } from './plugin' - -/** - * Re-export the FlasherPlugin class. - * - * This allows creating custom theme-based plugins. - * - * @example - * ```typescript - * import { FlasherPlugin } from '@flasher/flasher/exports'; - * import myTheme from './my-theme'; - * - * const plugin = new FlasherPlugin(myTheme); - * ``` - */ export { default as FlasherPlugin } from './flasher-plugin' - -/** - * Re-export the default flasher instance. - * - * This ensures consistency whether importing from the main package - * or from the exports file. - */ export { default } from './index' diff --git a/src/Prime/Resources/assets/index.ts b/src/Prime/Resources/assets/index.ts index b1688d58..99f7de27 100644 --- a/src/Prime/Resources/assets/index.ts +++ b/src/Prime/Resources/assets/index.ts @@ -1,44 +1,11 @@ -/** - * @file PHPFlasher Main Entry Point - * @description Creates and exports the default PHPFlasher instance - * @author Younes ENNAJI - */ import Flasher from './flasher' import { flasherTheme } from './themes' -/** - * Create and configure the default Flasher instance. - * - * This singleton instance is the main entry point for the PHPFlasher library. - * It comes pre-configured with the default theme. - */ const flasher = new Flasher() flasher.addTheme('flasher', flasherTheme) -/** - * Make the flasher instance available globally for browser scripts. - * - * This allows PHPFlasher to be used in vanilla JavaScript without - * module imports. - * - * @example - * ```javascript - * // In a browser script - * window.flasher.success('Operation completed'); - * ``` - */ if (typeof window !== 'undefined') { window.flasher = flasher } -/** - * Default export of the pre-configured flasher instance. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * - * flasher.success('Operation completed'); - * ``` - */ export default flasher diff --git a/src/Prime/Resources/assets/themes/amazon/amazon.scss b/src/Prime/Resources/assets/themes/amazon/amazon.scss index eb84e0f4..8dd486c1 100644 --- a/src/Prime/Resources/assets/themes/amazon/amazon.scss +++ b/src/Prime/Resources/assets/themes/amazon/amazon.scss @@ -1,69 +1,44 @@ -/** - * @file PHPFlasher Amazon Theme Styles - * @description CSS styling for Amazon-inspired notifications - * @author Younes ENNAJI - */ - -/** - * Amazon Theme - * - * A notification style inspired by Amazon's e-commerce platform. - * Features distinct color scheme and design language that mimics - * Amazon's alert components. - */ .fl-amazon { - /* Theme-specific variables - * These define the color palette and styling attributes unique to the Amazon theme - */ + --amazon-bg-light: #ffffff; + --amazon-bg-dark: #202124; + --amazon-text-light: #0f1111; + --amazon-text-secondary-light: #565959; + --amazon-text-dark: #ffffff; + --amazon-text-secondary-dark: #b6b6b6; + --amazon-border-light: #ddd; + --amazon-border-dark: #3f3f3f; + --amazon-yellow: #ffd814; + --amazon-orange: #ff9900; - /* Base colors */ - --amazon-bg-light: #ffffff; /* Light mode background */ - --amazon-bg-dark: #202124; /* Dark mode background */ - --amazon-text-light: #0f1111; /* Light mode primary text */ - --amazon-text-secondary-light: #565959; /* Light mode secondary text */ - --amazon-text-dark: #ffffff; /* Dark mode primary text */ - --amazon-text-secondary-dark: #b6b6b6; /* Dark mode secondary text */ - --amazon-border-light: #ddd; /* Light mode border */ - --amazon-border-dark: #3f3f3f; /* Dark mode border */ - --amazon-yellow: #ffd814; /* Amazon's signature yellow */ - --amazon-orange: #ff9900; /* Amazon's signature orange */ + --amazon-success-bg: #f0fff5; + --amazon-success-border: #7fda95; + --amazon-success-icon: #007600; + --amazon-info-bg: #f3f9ff; + --amazon-info-border: #7fb4da; + --amazon-info-icon: #0066c0; + --amazon-warning-bg: #fffcf3; + --amazon-warning-border: #ffd996; + --amazon-warning-icon: #c45500; + --amazon-error-bg: #fff5f5; + --amazon-error-border: #ff8f8f; + --amazon-error-icon: #c40000; - /* Type-specific colors - Light mode */ - --amazon-success-bg: #f0fff5; /* Success background */ - --amazon-success-border: #7fda95; /* Success border */ - --amazon-success-icon: #007600; /* Success icon color */ - --amazon-info-bg: #f3f9ff; /* Info background */ - --amazon-info-border: #7fb4da; /* Info border */ - --amazon-info-icon: #0066c0; /* Info icon color */ - --amazon-warning-bg: #fffcf3; /* Warning background */ - --amazon-warning-border: #ffd996; /* Warning border */ - --amazon-warning-icon: #c45500; /* Warning icon color */ - --amazon-error-bg: #fff5f5; /* Error background */ - --amazon-error-border: #ff8f8f; /* Error border */ - --amazon-error-icon: #c40000; /* Error icon color */ + --amazon-success-bg-dark: #082d11; + --amazon-success-border-dark: #1e6e2c; + --amazon-success-icon-dark: #7fda95; + --amazon-info-bg-dark: #0a1c2e; + --amazon-info-border-dark: #1a5183; + --amazon-info-icon-dark: #7fb4da; + --amazon-warning-bg-dark: #342a0a; + --amazon-warning-border-dark: #705711; + --amazon-warning-icon-dark: #ffd996; + --amazon-error-bg-dark: #2b0c0c; + --amazon-error-border-dark: #721c1c; + --amazon-error-icon-dark: #ff8f8f; - /* Type-specific colors - Dark mode */ - --amazon-success-bg-dark: #082d11; /* Dark mode success background */ - --amazon-success-border-dark: #1e6e2c; /* Dark mode success border */ - --amazon-success-icon-dark: #7fda95; /* Dark mode success icon */ - --amazon-info-bg-dark: #0a1c2e; /* Dark mode info background */ - --amazon-info-border-dark: #1a5183; /* Dark mode info border */ - --amazon-info-icon-dark: #7fb4da; /* Dark mode info icon */ - --amazon-warning-bg-dark: #342a0a; /* Dark mode warning background */ - --amazon-warning-border-dark: #705711; /* Dark mode warning border */ - --amazon-warning-icon-dark: #ffd996; /* Dark mode warning icon */ - --amazon-error-bg-dark: #2b0c0c; /* Dark mode error background */ - --amazon-error-border-dark: #721c1c; /* Dark mode error border */ - --amazon-error-icon-dark: #ff8f8f; /* Dark mode error icon */ - - /* Animation timing */ - --amazon-animation-duration: 0.2s; /* Duration for all animations */ + --amazon-animation-duration: 0.2s; } -/** - * Entrance animation for Amazon theme - * Slides in from the top with a fade effect - */ @keyframes amazonSlideDown { from { opacity: 0; @@ -75,19 +50,12 @@ } } -/** - * Base Amazon theme styling - */ .fl-amazon { position: relative; margin: 10px 0; font-family: Arial, sans-serif; animation: amazonSlideDown var(--amazon-animation-duration) ease-out; - /** - * Main alert container - * Contains all notification elements - */ .fl-amazon-alert { background-color: var(--amazon-bg-light); color: var(--amazon-text-light); @@ -99,64 +67,39 @@ border-left-width: 4px; } - /** - * Content area - * Contains icon and text elements - */ .fl-alert-content { display: flex; align-items: flex-start; flex: 1; } - /** - * Icon container - * Holds the SVG icon - */ .fl-icon-container { margin-right: 12px; flex-shrink: 0; color: currentColor; } - /** - * Text content container - * Holds title and message - */ .fl-text-content { flex: 1; min-width: 0; } - /** - * Alert title styling - */ .fl-alert-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; } - /** - * Alert message styling - */ .fl-alert-message { font-size: 14px; line-height: 20px; color: var(--amazon-text-secondary-light); } - /** - * Action buttons container - * Currently holds only the close button - */ .fl-alert-actions { margin-left: 16px; } - /** - * Close button styling - */ .fl-close { background: none; border: none; @@ -177,10 +120,6 @@ } } - /** - * Type-specific styling - * Each notification type has its own color scheme - */ &.fl-success { .fl-amazon-alert { background-color: var(--amazon-success-bg); @@ -225,10 +164,6 @@ } } - /** - * Right-to-Left language support - * Adjusts layout for RTL text direction - */ &.fl-rtl { direction: rtl; @@ -248,19 +183,11 @@ } } - /** - * Accessibility support - * Respects reduced motion preferences - */ @media (prefers-reduced-motion: reduce) { animation: none; } } -/** - * Dark mode support - * Different styling applied in dark mode - */ body.fl-dark .fl-amazon, html.fl-dark .fl-amazon, .fl-amazon.fl-auto-dark { @@ -284,9 +211,6 @@ html.fl-dark .fl-amazon, } } - /** - * Type-specific dark mode styling - */ &.fl-success { .fl-amazon-alert { background-color: var(--amazon-success-bg-dark); diff --git a/src/Prime/Resources/assets/themes/amazon/amazon.ts b/src/Prime/Resources/assets/themes/amazon/amazon.ts index e58a0a16..af7179a7 100644 --- a/src/Prime/Resources/assets/themes/amazon/amazon.ts +++ b/src/Prime/Resources/assets/themes/amazon/amazon.ts @@ -1,56 +1,14 @@ -/** - * @file PHPFlasher Amazon Theme Implementation - * @description Notification style inspired by Amazon's e-commerce platform - * @author Younes ENNAJI - */ import './amazon.scss' import type { Envelope } from '../../types' -/** - * Amazon-inspired notification theme for PHPFlasher. - * - * This theme mimics the design language of Amazon's alert and notification - * components with: - * - Type-specific icons and colors - * - Clear visual hierarchy - * - Accessible structure - * - Responsive layout - * - Dark mode support - * - RTL language support - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { amazonTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('amazon', amazonTheme); - * - * // Use the theme - * flasher.use('theme.amazon').success('Your order has been placed'); - * ``` - */ export const amazonTheme = { - /** - * Renders a notification envelope as HTML. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' - /** - * Gets the SVG icon based on notification type. - * Each notification type has a unique icon for visual distinction. - * - * @returns SVG markup for the icon - */ const getAlertIcon = () => { switch (type) { case 'success': @@ -73,12 +31,6 @@ export const amazonTheme = { return '' } - /** - * Gets the title text based on notification type. - * Provides consistent and recognizable heading text for each type. - * - * @returns Title string for the notification - */ const getAlertTitle = () => { switch (type) { case 'success': return 'Success!' diff --git a/src/Prime/Resources/assets/themes/amazon/index.ts b/src/Prime/Resources/assets/themes/amazon/index.ts index 8a3c08b0..000c9ab8 100644 --- a/src/Prime/Resources/assets/themes/amazon/index.ts +++ b/src/Prime/Resources/assets/themes/amazon/index.ts @@ -1,27 +1,4 @@ -/** - * @file PHPFlasher Amazon Theme Registration - * @description Registers the Amazon theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { amazonTheme } from './amazon' -/** - * Register the Amazon theme. - * - * This theme provides notifications styled after Amazon's design system. - * The registration makes the theme available under the name 'amazon'. - * - * The Amazon theme can be used by calling: - * ```typescript - * flasher.use('theme.amazon').success('Your order has been placed'); - * ``` - * - * Key features: - * - Clean, minimal design inspired by Amazon's alert components - * - Type-specific colors and icons - * - Accessible structure with appropriate ARIA roles and attributes - * - Support for both light and dark modes - * - RTL language support - */ flasher.addTheme('amazon', amazonTheme) diff --git a/src/Prime/Resources/assets/themes/amber/amber.scss b/src/Prime/Resources/assets/themes/amber/amber.scss index 640afea4..c88bec22 100644 --- a/src/Prime/Resources/assets/themes/amber/amber.scss +++ b/src/Prime/Resources/assets/themes/amber/amber.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Amber Theme Styles - * @description CSS styling for the modern, elegant Amber theme - * @author Younes ENNAJI */ - -/** * Amber Theme Variables * * Custom properties that define the appearance of Amber theme notifications. @@ -18,15 +12,12 @@ --amber-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Light mode shadow */ --amber-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.2); /* Dark mode shadow */ --amber-border-radius: 4px; /* Border radius for notifications */ - /* Type-specific colors */ --amber-success: #10b981; /* Success color (green) */ --amber-info: #3b82f6; /* Info color (blue) */ --amber-warning: #f59e0b; /* Warning color (orange) */ --amber-error: #ef4444; /* Error color (red) */ } - -/** * Entrance animation for Amber theme * Slides in from the top with a subtle fade effect */ @@ -40,8 +31,6 @@ transform: translateY(0); } } - -/** * Base Amber theme styling * Defines the core appearance and behavior of notifications */ @@ -56,7 +45,6 @@ animation: amberIn 0.3s ease-out; font-family: var(--fl-font), serif; will-change: transform, opacity; - /** * Content container * Holds all notification elements in a flexbox layout @@ -65,7 +53,6 @@ display: flex; align-items: center; } - /** * Icon styling * The icon is rendered by the core icons.scss @@ -74,7 +61,6 @@ font-size: 1.85em; margin-right: 0.8rem; } - /** * Text container * Takes up available space with flex: 1 @@ -82,7 +68,6 @@ .fl-text { flex: 1; } - /** * Message styling * Main notification text with optimized readability @@ -91,7 +76,6 @@ font-size: 0.875em; line-height: 1.4; } - /** * Close button styling * Minimal button with hover effect @@ -108,12 +92,10 @@ flex-shrink: 0; color: currentColor; touch-action: manipulation; - &:hover, &:focus { opacity: 1; } } - /** * Progress bar container * Positioned at the bottom of the notification @@ -125,7 +107,6 @@ bottom: 0; height: 3px; overflow: hidden; - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -135,7 +116,6 @@ width: 100%; } } - /** * Type-specific styling for close button * Each notification type gets its own color for the close button @@ -145,47 +125,39 @@ color: var(--amber-success); } } - &.fl-info { .fl-close { color: var(--amber-info); } } - &.fl-warning { .fl-close { color: var(--amber-warning); } } - &.fl-error { .fl-close { color: var(--amber-error); } } - /** * RTL (Right-to-Left) language support * Adjusts layout for RTL text direction */ &.fl-rtl { direction: rtl; - .fl-icon { margin-right: 0; margin-left: 0.8rem; } - .fl-close { margin-left: 0; margin-right: 1rem; } - .fl-progress .fl-progress { transform-origin: right center; } } - /** * Accessibility support * Respects reduced motion preferences @@ -194,8 +166,6 @@ animation: none; } } - -/** * Dark mode support * Applies dark theme colors when in dark mode */ diff --git a/src/Prime/Resources/assets/themes/amber/amber.ts b/src/Prime/Resources/assets/themes/amber/amber.ts index c91a8311..05f54a23 100644 --- a/src/Prime/Resources/assets/themes/amber/amber.ts +++ b/src/Prime/Resources/assets/themes/amber/amber.ts @@ -1,52 +1,10 @@ -/** - * @file PHPFlasher Amber Theme Implementation - * @description Modern, elegant notification theme with refined aesthetics - * @author Younes ENNAJI - */ import './amber.scss' import type { Envelope } from '../../types' -/** - * Amber notification theme for PHPFlasher. - * - * The Amber theme provides a clean, minimal design that focuses on - * content readability while maintaining visual appeal. It features: - * - Minimalist design with clean lines - * - Subtle animations and transitions - * - Built-in progress indicator - * - Accessible structure - * - Dark mode support - * - RTL language support - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { amberTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('amber', amberTheme); - * - * // Use the theme - * flasher.use('theme.amber').success('Your changes have been saved'); - * ``` - */ export const amberTheme = { - /** - * Renders a notification envelope as HTML. - * - * Generates a clean, accessible notification element with: - * - Type-specific icon - * - Message content - * - Close button - * - Progress indicator - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/amber/index.ts b/src/Prime/Resources/assets/themes/amber/index.ts index 28702952..c024886b 100644 --- a/src/Prime/Resources/assets/themes/amber/index.ts +++ b/src/Prime/Resources/assets/themes/amber/index.ts @@ -1,28 +1,4 @@ -/** - * @file PHPFlasher Amber Theme Registration - * @description Registers the Amber theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { amberTheme } from './amber' -/** - * Register the Amber theme. - * - * This theme provides a modern, clean notification style with elegant aesthetics. - * The registration makes the theme available under the name 'amber'. - * - * The Amber theme can be used by calling: - * ```typescript - * flasher.use('theme.amber').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Modern, minimalist design - * - Clean typography with optimal readability - * - Subtle entrance animation - * - Progress indicator - * - Full dark mode support - * - RTL language support - */ flasher.addTheme('amber', amberTheme) diff --git a/src/Prime/Resources/assets/themes/aurora/aurora.scss b/src/Prime/Resources/assets/themes/aurora/aurora.scss index 0a78596f..e956321c 100644 --- a/src/Prime/Resources/assets/themes/aurora/aurora.scss +++ b/src/Prime/Resources/assets/themes/aurora/aurora.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Aurora Theme Styles - * @description CSS styling for the elegant glass-morphism Aurora theme - * @author Younes ENNAJI */ - -/** * PHPFlasher - Aurora Theme * * Elegant notifications with subtle gradients, backdrop blur, and soft edges. @@ -12,7 +6,6 @@ */ .fl-aurora { /* Theme variables - Defines the visual appearance of Aurora notifications */ - /* Base colors and appearance */ --aurora-bg-light: rgba(255, 255, 255); /* Semi-transparent light background */ --aurora-bg-dark: rgba(20, 20, 28); /* Semi-transparent dark background */ @@ -22,21 +15,17 @@ --aurora-shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.16); /* Dark mode shadow */ --aurora-border-radius: 4px; /* Rounded corners radius */ --aurora-blur: 15px; /* Amount of backdrop blur */ - /* Gradient overlays for each notification type - Light mode */ --aurora-success-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.2) 100%); --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%); - /* Type-specific accent colors for progress bars */ --aurora-success: #10b981; /* Success color (green) */ --aurora-info: #3b82f6; /* Info color (blue) */ --aurora-warning: #f59e0b; /* Warning color (orange) */ --aurora-error: #ef4444; /* Error color (red) */ } - -/** * Entrance animation for Aurora theme * Combines fade-in with a subtle scale effect */ @@ -50,8 +39,6 @@ transform: translateY(0) scale(1); /* End at full size */ } } - -/** * Base Aurora theme styling */ .fl-aurora { @@ -67,11 +54,9 @@ font-family: var(--fl-font), sans-serif; overflow: hidden; /* Prevents gradient from leaking */ will-change: transform, opacity; /* Optimize for animation performance */ - /* Glass morphism effect with backdrop blur */ backdrop-filter: blur(var(--aurora-blur)); /* Creates frosted glass look */ -webkit-backdrop-filter: blur(var(--aurora-blur)); /* Safari support */ - /** * Gradient overlay * Creates a colored gradient based on notification type @@ -84,7 +69,6 @@ opacity: 0.8; border-radius: inherit; /* Match parent's border radius */ } - /** * Content container * Holds message and close button @@ -95,7 +79,6 @@ position: relative; z-index: 1; /* Place above gradient overlay */ } - /** * Message styling * The main notification text @@ -107,7 +90,6 @@ font-weight: 500; /* Medium weight for better readability */ margin-right: 10px; } - /** * Close button styling * Circular button with hover effect @@ -127,13 +109,11 @@ opacity: 0.7; transition: all 0.2s ease; color: inherit; - &:hover, &:focus { opacity: 1; background: rgba(0, 0, 0, 0.1); /* Darker on hover/focus */ } } - /** * Progress bar container * Holds the animated progress indicator @@ -149,7 +129,6 @@ opacity: 0.7; /* Slightly transparent */ z-index: 1; /* Above gradient, below content */ } - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -158,7 +137,6 @@ height: 100%; width: 100%; } - /** * Type-specific styling * Each notification type gets its own gradient and progress bar color @@ -167,39 +145,32 @@ &::before { background: var(--aurora-success-gradient); } .fl-progress { background-color: var(--aurora-success); } } - &.fl-info { &::before { background: var(--aurora-info-gradient); } .fl-progress { background-color: var(--aurora-info); } } - &.fl-warning { &::before { background: var(--aurora-warning-gradient); } .fl-progress { background-color: var(--aurora-warning); } } - &.fl-error { &::before { background: var(--aurora-error-gradient); } .fl-progress { background-color: var(--aurora-error); } } - /** * RTL support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-message { margin-right: 0; margin-left: 10px; /* Swap margins */ } - .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences @@ -208,8 +179,6 @@ animation: none; /* Disable animation */ } } - -/** * Dark mode support * Different styling when in dark mode */ @@ -219,16 +188,13 @@ html.fl-dark .fl-aurora, background-color: var(--aurora-bg-dark); color: var(--aurora-text-dark); box-shadow: var(--aurora-shadow-dark); - /* Adjusted close button for dark mode */ .fl-close { background: rgba(255, 255, 255, 0.1); /* Lighter background in dark mode */ - &:hover, &:focus { background: rgba(255, 255, 255, 0.15); /* Lighter hover in dark mode */ } } - /* Stronger gradients for better visibility in dark mode */ &.fl-success::before { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.25) 100%); } &.fl-info::before { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.25) 100%); } diff --git a/src/Prime/Resources/assets/themes/aurora/aurora.ts b/src/Prime/Resources/assets/themes/aurora/aurora.ts index 11f53f40..3b498e09 100644 --- a/src/Prime/Resources/assets/themes/aurora/aurora.ts +++ b/src/Prime/Resources/assets/themes/aurora/aurora.ts @@ -1,57 +1,10 @@ -/** - * @file PHPFlasher Aurora Theme Implementation - * @description Calm, soothing notification style with glass morphism effects - * @author Younes ENNAJI - */ import './aurora.scss' import type { Envelope } from '../../types' -/** - * Aurora notification theme for PHPFlasher. - * - * The Aurora theme provides an elegant, modern glass-like appearance with: - * - Translucent background with backdrop blur - * - Subtle gradients based on notification type - * - Soft rounded corners and delicate shadows - * - Minimalist design that focuses on content - * - Smooth animation with subtle scaling - * - Accessible structure and interactions - * - * This theme is inspired by modern glass/frosted UI design patterns found in - * iOS and macOS, providing a contemporary feel that works well in both light - * and dark modes. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { auroraTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('aurora', auroraTheme); - * - * // Use the theme - * flasher.use('theme.aurora').success('Your profile has been updated'); - * ``` - */ export const auroraTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a minimal, elegant notification with just the essential elements: - * - Message text - * - Close button - * - Progress indicator - * - * The aurora theme deliberately omits icons to maintain its clean aesthetic, - * relying instead on subtle color gradients to indicate notification type. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/aurora/index.ts b/src/Prime/Resources/assets/themes/aurora/index.ts index 9fa6255e..057f915d 100644 --- a/src/Prime/Resources/assets/themes/aurora/index.ts +++ b/src/Prime/Resources/assets/themes/aurora/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Aurora Theme Registration - * @description Registers the Aurora theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { auroraTheme } from './aurora' -/** - * Register the Aurora theme. - * - * This theme provides an elegant glass-morphism notification style with - * subtle gradients and backdrop blur effects. - * - * The registration makes the theme available under the name 'aurora'. - * - * The Aurora theme can be used by calling: - * ```typescript - * flasher.use('theme.aurora').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Glass-like appearance with blur effects - * - Type-specific gradient backgrounds - * - Minimalist design without icons - * - Smooth entrance animation - * - Progress indicator - */ flasher.addTheme('aurora', auroraTheme) diff --git a/src/Prime/Resources/assets/themes/container.scss b/src/Prime/Resources/assets/themes/container.scss index eb803ef2..8b4cd695 100644 --- a/src/Prime/Resources/assets/themes/container.scss +++ b/src/Prime/Resources/assets/themes/container.scss @@ -1,15 +1,3 @@ -/** - * @file PHPFlasher Container Styles - * @description Base styling for individual notification elements - * @author Younes ENNAJI - */ - -/** - * .fl-container - * - * The base notification container that all themes build upon. - * Controls core animation behaviors and text color. - */ .fl-container { color: var(--text-color, var(--fl-text-light)); opacity: 0; @@ -17,19 +5,11 @@ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); will-change: opacity, transform; - /** - * Visible state - * Applied when notification is fully rendered - */ &.fl-show { opacity: 1; transform: translate(0, 0) !important; } - /** - * Right-to-left support - * For languages that read from right to left - */ &.fl-rtl { text-align: right; } diff --git a/src/Prime/Resources/assets/themes/crystal/crystal.scss b/src/Prime/Resources/assets/themes/crystal/crystal.scss index c1a9ba8d..f5aeab37 100644 --- a/src/Prime/Resources/assets/themes/crystal/crystal.scss +++ b/src/Prime/Resources/assets/themes/crystal/crystal.scss @@ -1,17 +1,9 @@ -/** - * @file PHPFlasher Crystal Theme Styles - * @description CSS styling for the elegant Crystal theme - * @author Younes ENNAJI */ - -/** * PHPFlasher - Crystal Theme * * A clean, elegant notification theme with subtle animations * and a focus on simplicity and readability. */ - -/** * Theme-specific variables * Define the color palette and styling attributes for Crystal theme */ @@ -21,13 +13,10 @@ --crystal-bg-dark: rgba(30, 30, 30, 0.95); /* Near-black in dark mode */ --crystal-text-light: #2c3e50; /* Deep blue-gray text for light mode */ --crystal-text-dark: rgba(255, 255, 255, 0.95); /* Off-white text for dark mode */ - /* Shadow colors for animations and effects */ --crystal-shadow: rgba(0, 0, 0, 0.08); /* Subtle shadow for light mode */ --crystal-shadow-dark: rgba(0, 0, 0, 0.25); /* Stronger shadow for dark mode */ } - -/** * Entrance animation * Slides in from the top with a fade effect */ @@ -41,8 +30,6 @@ transform: translateY(0); /* End at natural position */ } } - -/** * Hover animation * Creates a subtle pulsing shadow effect */ @@ -57,8 +44,6 @@ box-shadow: 0 2px 8px var(--crystal-shadow); /* Return to normal shadow */ } } - -/** * Base Crystal theme styling */ .fl-crystal { @@ -71,7 +56,6 @@ border-radius: var(--fl-border-radius, 4px) var(--fl-border-radius, 4px) 0 0; /* Rounded corners */ will-change: transform, opacity; /* Optimize for animation performance */ transition: box-shadow 0.3s ease; /* Smooth transition for shadow changes */ - /** * Hover effect * Applies pulsing animation when notification is hovered @@ -79,7 +63,6 @@ &:hover { animation: crystalPulse 2s ease-in-out infinite; } - /** * Content container * Holds the message and close button @@ -90,7 +73,6 @@ align-items: center; gap: 0.75rem; /* Space between elements */ } - /** * Text container * Holds the message paragraph @@ -98,7 +80,6 @@ .fl-text { flex: 1; /* Take available space */ } - /** * Message styling * The primary notification text @@ -109,7 +90,6 @@ line-height: 1.4; /* Improved readability */ color: var(--crystal-text-light, var(--fl-text-light)); } - /** * Close button styling * Positioned absolutely to maintain consistent layout @@ -129,13 +109,11 @@ transition: all 0.2s ease; color: currentColor; /* Inherit color from parent */ touch-action: manipulation; /* Better touch behavior */ - &:hover, &:focus { opacity: 1; /* Full opacity on interaction */ transform: translateY(-50%) scale(1.1); /* Slight grow effect */ } } - /** * Progress bar container * Holds the animated progress indicator @@ -147,7 +125,6 @@ right: 0; height: 3px; overflow: hidden; - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -158,7 +135,6 @@ transform-origin: left center; /* Animation starts from left */ } } - /** * Type-specific styling * Each notification type gets its own text color @@ -167,58 +143,47 @@ color: var(--success-color, var(--fl-success)); .fl-message { color: var(--success-color, var(--fl-success)); } } - &.fl-error { color: var(--error-color, var(--fl-error)); .fl-message { color: var(--error-color, var(--fl-error)); } } - &.fl-warning { color: var(--warning-color, var(--fl-warning)); .fl-message { color: var(--warning-color, var(--fl-warning)); } } - &.fl-info { color: var(--info-color, var(--fl-info)); .fl-message { color: var(--info-color, var(--fl-info)); } } - /** * RTL support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-content { padding: 1rem 1rem 1rem 2.5rem; /* Swap padding for close button on left */ } - .fl-close { right: auto; left: 0.75rem; /* Move close button to left side */ } - .fl-progress .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences */ @media (prefers-reduced-motion: reduce) { animation: none; /* Disable entrance animation */ - &:hover { animation: none; /* Disable pulse animation */ box-shadow: 0 2px 8px var(--crystal-shadow); /* Keep default shadow */ } } } - -/** * Dark mode support * Different styling when in dark mode */ @@ -227,11 +192,9 @@ html.fl-dark .fl-crystal, .fl-crystal.fl-auto-dark { background-color: var(--crystal-bg-dark, var(--fl-bg-dark)); box-shadow: 0 2px 8px var(--crystal-shadow-dark); - .fl-message { color: var(--crystal-text-dark, var(--fl-text-dark)); } - &:hover { animation: none; /* Disable pulse in dark mode */ box-shadow: 0 4px 16px var(--crystal-shadow-dark); /* Use static enhanced shadow instead */ diff --git a/src/Prime/Resources/assets/themes/crystal/crystal.ts b/src/Prime/Resources/assets/themes/crystal/crystal.ts index f3c78701..81b8879f 100644 --- a/src/Prime/Resources/assets/themes/crystal/crystal.ts +++ b/src/Prime/Resources/assets/themes/crystal/crystal.ts @@ -1,56 +1,10 @@ -/** - * @file PHPFlasher Crystal Theme Implementation - * @description Clean, elegant notification theme with subtle animations - * @author Younes ENNAJI - */ import './crystal.scss' import type { Envelope } from '../../types' -/** - * Crystal notification theme for PHPFlasher. - * - * The Crystal theme provides a clean, elegant design with distinct features: - * - Monochromatic design with colored text for each notification type - * - Subtle entrance animation - * - Gentle pulsing shadow effect on hover - * - Minimalist structure that emphasizes message content - * - Smooth transitions and animations - * - Accessible structure and interactions - * - * This theme aims to be understated yet elegant, providing notifications - * that are noticeable without being distracting. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { crystalTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('crystal', crystalTheme); - * - * // Use the theme - * flasher.use('theme.crystal').success('Document saved successfully'); - * ``` - */ export const crystalTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a clean, elegant notification with minimal elements: - * - Message text - * - Close button - * - Progress indicator - * - * The Crystal theme uses colored text rather than backgrounds to indicate - * notification type, creating a more subtle visual distinction. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/crystal/index.ts b/src/Prime/Resources/assets/themes/crystal/index.ts index b57854d2..a1050832 100644 --- a/src/Prime/Resources/assets/themes/crystal/index.ts +++ b/src/Prime/Resources/assets/themes/crystal/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Crystal Theme Registration - * @description Registers the Crystal theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { crystalTheme } from './crystal' -/** - * Register the Crystal theme. - * - * This theme provides an elegant notification style with subtle animations - * and a clean, minimal design. - * - * The registration makes the theme available under the name 'crystal'. - * - * The Crystal theme can be used by calling: - * ```typescript - * flasher.use('theme.crystal').success('Your document has been saved'); - * ``` - * - * Key features: - * - Clean, white background with colored text - * - Subtle pulsing shadow effect on hover - * - Smooth entrance animation - * - Progress indicator - * - Minimalist design that focuses on the message - */ flasher.addTheme('crystal', crystalTheme) diff --git a/src/Prime/Resources/assets/themes/emerald/emerald.scss b/src/Prime/Resources/assets/themes/emerald/emerald.scss index 491390f3..c4e5cf6f 100644 --- a/src/Prime/Resources/assets/themes/emerald/emerald.scss +++ b/src/Prime/Resources/assets/themes/emerald/emerald.scss @@ -1,17 +1,9 @@ -/** - * @file PHPFlasher Emerald Theme Styles - * @description CSS styling for the elegant glass-like Emerald theme - * @author Younes ENNAJI */ - -/** * PHPFlasher - Emerald Theme * * An elegant, minimalist theme with glass-like appearance and bounce animation. * Features translucent backgrounds with blur effects and colored text. */ - -/** * Theme-specific variables * Define the color palette and styling attributes for Emerald theme */ @@ -23,15 +15,12 @@ --emerald-text-dark: rgba(255, 255, 255, 0.9); /* Light text for dark mode */ --emerald-shadow: rgba(0, 0, 0, 0.1); /* Subtle shadow */ --emerald-blur: 8px; /* Backdrop blur amount */ - /* Type-specific colors */ --emerald-success: var(--success-color, #16a085); /* Teal green for success */ --emerald-error: var(--error-color, #e74c3c); /* Bright red for errors */ --emerald-warning: var(--warning-color, #f39c12); /* Orange for warnings */ --emerald-info: var(--info-color, #3498db); /* Blue for information */ } - -/** * Entrance animation with bounce effect * Combines scaling and vertical movement for a dynamic entrance */ @@ -49,8 +38,6 @@ transform: scale(1) translateY(0); /* Settle at final size and position */ } } - -/** * Base Emerald theme styling */ .fl-emerald { @@ -66,7 +53,6 @@ padding: 1rem 1.5rem 1rem 1rem; /* Asymmetric padding for close button */ color: var(--emerald-text-light); /* Default text color */ border-radius: 4px 4px 0 0; /* Rounded corners */ - /** * Content container * Holds message and close button in a flex layout @@ -75,7 +61,6 @@ display: flex; align-items: center; /* Vertically center contents */ } - /** * Message styling * The primary notification text @@ -86,7 +71,6 @@ line-height: 1.4; /* Improved readability */ font-weight: 500; /* Medium weight for better visibility */ } - /** * Close button styling * Simple, transparent button with hover effect @@ -100,12 +84,10 @@ opacity: 0.7; /* Subtle appearance by default */ transition: opacity 0.2s ease; /* Smooth hover effect */ color: currentColor; /* Inherit color from parent */ - &:hover, &:focus { opacity: 1; /* Full opacity on interaction */ } } - /** * Type-specific styling * Each notification type gets its own text color @@ -113,19 +95,15 @@ &.fl-success { color: var(--emerald-success); /* Green text for success */ } - &.fl-error { color: var(--emerald-error); /* Red text for errors */ } - &.fl-warning { color: var(--emerald-warning); /* Orange text for warnings */ } - &.fl-info { color: var(--emerald-info); /* Blue text for info */ } - /** * RTL support * Right-to-left language direction support @@ -133,17 +111,14 @@ &.fl-rtl { direction: rtl; padding: 1rem 1rem 1rem 1.5rem; /* Swap padding for RTL */ - .fl-content { flex-direction: row-reverse; /* Reverse flex direction */ } - .fl-close { margin-left: 0; margin-right: auto; /* Push to the left in RTL */ } } - /** * Accessibility * Respects reduced motion preferences @@ -152,8 +127,6 @@ animation: none; /* Disable animation */ } } - -/** * Dark mode support * Different styling when in dark mode */ @@ -161,7 +134,6 @@ body.fl-dark .fl-emerald, html.fl-dark .fl-emerald, .fl-emerald.fl-auto-dark { background: var(--emerald-bg-dark); /* Dark, semi-transparent background */ - .fl-message { color: var(--emerald-text-dark); /* Lighter text in dark mode */ } diff --git a/src/Prime/Resources/assets/themes/emerald/emerald.ts b/src/Prime/Resources/assets/themes/emerald/emerald.ts index 06f7ba8c..87156d65 100644 --- a/src/Prime/Resources/assets/themes/emerald/emerald.ts +++ b/src/Prime/Resources/assets/themes/emerald/emerald.ts @@ -1,51 +1,10 @@ -/** - * @file PHPFlasher Emerald Theme Implementation - * @description Elegant glass-like notification theme with bounce animation - * @author Younes ENNAJI - */ import './emerald.scss' import type { Envelope } from '../../types' -/** - * Emerald notification theme for PHPFlasher. - * - * The Emerald theme provides an elegant, glass-like notification style with: - * - Translucent background with backdrop blur effect - * - Distinctive bounce animation on entrance - * - Colored text based on notification type - * - Clean and modern typography - * - Minimalistic design with focus on readability - * - No progress bar for a cleaner appearance - * - * This theme is named "Emerald" for its polished, refined appearance that - * gives notifications a gem-like quality. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { emeraldTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('emerald', emeraldTheme); - * - * // Use the theme - * flasher.use('theme.emerald').success('Your changes have been saved'); - * ``` - */ export const emeraldTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a minimal, elegant notification without icons or progress bars - * for a clean look. Focuses solely on the message and close button. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/emerald/index.ts b/src/Prime/Resources/assets/themes/emerald/index.ts index 06614af3..5bff62fc 100644 --- a/src/Prime/Resources/assets/themes/emerald/index.ts +++ b/src/Prime/Resources/assets/themes/emerald/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Emerald Theme Registration - * @description Registers the Emerald theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { emeraldTheme } from './emerald' -/** - * Register the Emerald theme. - * - * This theme provides an elegant glass-like notification style with bounce animation - * and translucent background. - * - * The registration makes the theme available under the name 'emerald'. - * - * The Emerald theme can be used by calling: - * ```typescript - * flasher.use('theme.emerald').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Glass morphism design with backdrop blur - * - Bounce animation on entrance - * - Colored text based on notification type - * - No icons or progress bar for a clean look - * - Clean typography with the Inter font (falls back to system fonts) - */ flasher.addTheme('emerald', emeraldTheme) diff --git a/src/Prime/Resources/assets/themes/facebook/facebook.scss b/src/Prime/Resources/assets/themes/facebook/facebook.scss index 22a6cf0d..e78b264c 100644 --- a/src/Prime/Resources/assets/themes/facebook/facebook.scss +++ b/src/Prime/Resources/assets/themes/facebook/facebook.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Facebook Theme Styles - * @description CSS styling for Facebook-inspired notifications - * @author Younes ENNAJI */ - -/** * PHPFlasher - Facebook Theme * * Classic notifications inspired by Facebook's instantly recognizable interface. @@ -12,7 +6,6 @@ */ .fl-facebook { /* Theme variables - Define the visual appearance of Facebook notifications */ - /* Base colors for light and dark modes */ --fb-bg-light: #ffffff; /* White background in light mode */ --fb-bg-dark: #242526; /* Dark gray in dark mode */ @@ -27,30 +20,24 @@ --fb-blue: #1876f2; /* Facebook's signature blue */ --fb-name-color: #050505; /* Username color in light mode */ --fb-name-color-dark: #e4e6eb; /* Username color in dark mode */ - /* Type-specific colors for icons */ --fb-success: #31a24c; /* Green for success notifications */ --fb-info: #1876f2; /* Blue for info notifications */ --fb-warning: #f7b928; /* Yellow for warning notifications */ --fb-error: #e41e3f; /* Red for error notifications */ - /* Icon background colors - Light mode */ --fb-success-bg: #e7f3ff; /* Light blue background for success icons */ --fb-info-bg: #e7f3ff; /* Light blue background for info icons */ --fb-warning-bg: #fff5cc; /* Light yellow background for warning icons */ --fb-error-bg: #ffebe9; /* Light red background for error icons */ - /* Icon background colors - Dark mode */ --fb-success-bg-dark: #263c4b; /* Dark blue background for success icons */ --fb-info-bg-dark: #263c4b; /* Dark blue background for info icons */ --fb-warning-bg-dark: #3e3c26; /* Dark yellow background for warning icons */ --fb-error-bg-dark: #472835; /* Dark red background for error icons */ - /* Animation timing */ --fb-animation-duration: 0.2s; /* Duration for entrance animation */ } - -/** * Entrance animation for Facebook theme * Slides in from above with a fade effect */ @@ -64,8 +51,6 @@ transform: translateY(0); /* End at natural position */ } } - -/** * Base Facebook theme styling */ .fl-facebook { @@ -73,7 +58,6 @@ margin: 8px 0; /* Spacing between notifications */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Facebook's font stack */ animation: fbFadeIn var(--fb-animation-duration) ease-out; - /** * Main notification card * Contains icon, message, and actions @@ -87,12 +71,10 @@ align-items: flex-start; /* Align items to top for proper icon alignment */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */ transition: background-color 0.1s ease; /* Smooth hover transition */ - &:hover { background-color: var(--fb-hover-light); /* Background change on hover */ } } - /** * Icon container * Holds the notification type icon @@ -101,7 +83,6 @@ margin-right: 12px; flex-shrink: 0; /* Prevent icon from shrinking */ } - /** * Icon styling * Circular background with centered icon @@ -113,12 +94,10 @@ display: flex; align-items: center; justify-content: center; /* Center the SVG icon */ - svg { color: white; /* Icon color is white in light mode */ } } - /** * Type-specific icon styling * Each notification type has its own icon color @@ -126,19 +105,15 @@ .fl-fb-icon-success { background-color: var(--fb-success); } - .fl-fb-icon-info { background-color: var(--fb-info); } - .fl-fb-icon-warning { background-color: var(--fb-warning); } - .fl-fb-icon-error { background-color: var(--fb-error); } - /** * Content container * Holds message and timestamp @@ -147,7 +122,6 @@ flex: 1; /* Take available space */ min-width: 0; /* Enable text truncation */ } - /** * Message styling * Main notification text @@ -157,7 +131,6 @@ line-height: 1.33; /* Improved readability */ margin-bottom: 4px; } - /** * Username styling * For displaying user names in bold @@ -167,7 +140,6 @@ color: var(--fb-name-color); margin-right: 4px; } - /** * Metadata container * Holds timestamp and additional info @@ -176,7 +148,6 @@ display: flex; align-items: center; } - /** * Timestamp styling * Shows when the notification was created @@ -185,7 +156,6 @@ font-size: 13px; /* Smaller text for timestamp */ color: var(--fb-text-secondary-light); /* Gray secondary text color */ } - /** * Action buttons container * Holds interactive buttons like close @@ -195,7 +165,6 @@ margin-left: 12px; align-items: center; } - /** * Button styling * Circular buttons with hover effect @@ -213,12 +182,10 @@ color: var(--fb-text-secondary-light); margin-left: 8px; transition: background-color 0.1s; /* Quick hover transition */ - &:hover { background-color: var(--fb-border-light); /* Darker background on hover */ } } - /** * Button icon container * Centers SVG icons within buttons @@ -228,35 +195,29 @@ align-items: center; justify-content: center; } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-icon-container { margin-right: 0; margin-left: 12px; /* Swap margins for RTL */ } - .fl-user-name { margin-right: 0; margin-left: 4px; /* Swap margins for RTL */ } - .fl-actions { margin-left: 0; margin-right: 12px; /* Swap margins for RTL */ } - .fl-button { margin-left: 0; margin-right: 8px; /* Swap margins for RTL */ } } - /** * Accessibility * Respects reduced motion preferences @@ -265,8 +226,6 @@ animation: none; /* Disable animation */ } } - -/** * Dark mode support * Different styling when in dark mode */ @@ -277,29 +236,23 @@ html.fl-dark .fl-facebook, background-color: var(--fb-bg-dark); color: var(--fb-text-dark); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Stronger shadow in dark mode */ - &:hover { background-color: var(--fb-hover-dark); } } - .fl-user-name { color: var(--fb-name-color-dark); } - .fl-time { color: var(--fb-text-secondary-dark); } - .fl-button { background: var(--fb-hover-dark); color: var(--fb-text-secondary-dark); - &:hover { background-color: var(--fb-border-dark); } } - /** * Type-specific icon styling for dark mode * Uses darker backgrounds with colored icons for better visibility @@ -308,17 +261,14 @@ html.fl-dark .fl-facebook, background-color: var(--fb-success-bg-dark); svg { color: var(--fb-success); } /* Icon color matches type in dark mode */ } - .fl-fb-icon-info { background-color: var(--fb-info-bg-dark); svg { color: var(--fb-info); } } - .fl-fb-icon-warning { background-color: var(--fb-warning-bg-dark); svg { color: var(--fb-warning); } } - .fl-fb-icon-error { background-color: var(--fb-error-bg-dark); svg { color: var(--fb-error); } diff --git a/src/Prime/Resources/assets/themes/facebook/facebook.ts b/src/Prime/Resources/assets/themes/facebook/facebook.ts index c133328b..b23630f7 100644 --- a/src/Prime/Resources/assets/themes/facebook/facebook.ts +++ b/src/Prime/Resources/assets/themes/facebook/facebook.ts @@ -1,65 +1,17 @@ -/** - * @file PHPFlasher Facebook Theme Implementation - * @description Social media style notifications inspired by Facebook's interface - * @author Younes ENNAJI - */ import './facebook.scss' import type { Envelope } from '../../types' -/** - * Facebook-inspired notification theme for PHPFlasher. - * - * This theme replicates the familiar notification style from Facebook's interface, - * featuring: - * - Rounded notification cards with subtle shadows - * - Circular icons with type-specific colors - * - Message content with time information - * - Close button with hover effect - * - Facebook's signature font and color scheme - * - * The theme is designed to be immediately recognizable to users familiar with - * the Facebook platform, providing a sense of familiarity and consistency. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { facebookTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('facebook', facebookTheme); - * - * // Use the theme - * flasher.use('theme.facebook').success('Your post was published successfully'); - * ``` - */ export const facebookTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a Facebook-style notification with icon, message, timestamp, and close button. - * The layout mimics Facebook's notification design for a familiar user experience. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' - // Format current time in Facebook style (hour:minute) const now = new Date() const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) - /** - * Gets the appropriate icon based on notification type. - * Each type has a specific icon matching Facebook's visual language. - * - * @returns SVG markup for the notification icon - */ const getNotificationIcon = () => { switch (type) { case 'success': @@ -108,7 +60,7 @@ export const facebookTheme = { diff --git a/src/Prime/Resources/assets/themes/facebook/index.ts b/src/Prime/Resources/assets/themes/facebook/index.ts index 78ea1c4a..e69c8280 100644 --- a/src/Prime/Resources/assets/themes/facebook/index.ts +++ b/src/Prime/Resources/assets/themes/facebook/index.ts @@ -1,27 +1,4 @@ -/** - * @file PHPFlasher Facebook Theme Registration - * @description Registers the Facebook theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { facebookTheme } from './facebook' -/** - * Register the Facebook theme. - * - * This theme provides notifications styled after Facebook's interface design. - * The registration makes the theme available under the name 'facebook'. - * - * The Facebook theme can be used by calling: - * ```typescript - * flasher.use('theme.facebook').success('Your post was published successfully'); - * ``` - * - * Key features: - * - Facebook-like notification cards with rounded corners and subtle shadows - * - Type-specific circular icons with branded colors - * - Timestamp display similar to Facebook's time format - * - Interactive elements with hover states - * - Facebook's distinctive font family and color palette - */ flasher.addTheme('facebook', facebookTheme) diff --git a/src/Prime/Resources/assets/themes/flasher/flasher.ts b/src/Prime/Resources/assets/themes/flasher/flasher.ts index f252a1e8..eda35ff9 100644 --- a/src/Prime/Resources/assets/themes/flasher/flasher.ts +++ b/src/Prime/Resources/assets/themes/flasher/flasher.ts @@ -1,49 +1,14 @@ -/** - * @file PHPFlasher Default Theme - * @description Theme implementation for the default PHPFlasher notification style - * @author Younes ENNAJI - */ import './flasher.scss' import type { Envelope } from '../../types' -/** - * The default PHPFlasher theme. - * - * This theme provides a classic bordered notification style with: - * - Colored left border based on notification type - * - Icon representing the notification type - * - Title and message content - * - Close button - * - Progress bar for auto-dismiss - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { flasherTheme } from '@flasher/flasher/themes'; - * - * // Register the theme if not already registered - * flasher.addTheme('custom-name', flasherTheme); - * - * // Use the theme - * flasher.use('theme.custom-name').success('Operation completed'); - * ``` - */ export const flasherTheme = { - /** - * Renders an envelope as HTML. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, title, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' - // Use provided title or capitalize the notification type const displayTitle = title || type.charAt(0).toUpperCase() + type.slice(1) return ` diff --git a/src/Prime/Resources/assets/themes/flasher/index.ts b/src/Prime/Resources/assets/themes/flasher/index.ts index 00b39dd3..e3835356 100644 --- a/src/Prime/Resources/assets/themes/flasher/index.ts +++ b/src/Prime/Resources/assets/themes/flasher/index.ts @@ -1,20 +1,4 @@ -/** - * @file PHPFlasher Default Theme Registration - * @description Registers the default theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { flasherTheme } from './flasher' -/** - * Register the default "flasher" theme. - * - * This theme is automatically registered when PHPFlasher is initialized - * and is used as the default theme when no specific theme is requested. - * - * The flasher theme is used whenever: - * - You call flasher.success(), flasher.error(), etc. directly - * - You use flasher.use('flasher') explicitly - * - You use flasher.use('theme.flasher') explicitly - */ flasher.addTheme('flasher', flasherTheme) diff --git a/src/Prime/Resources/assets/themes/google/google.scss b/src/Prime/Resources/assets/themes/google/google.scss index b8abf1fd..da2dd956 100644 --- a/src/Prime/Resources/assets/themes/google/google.scss +++ b/src/Prime/Resources/assets/themes/google/google.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Google Theme Styles - * @description CSS styling for Material Design-inspired notifications - * @author Younes ENNAJI */ - -/** * PHPFlasher - Google Theme * * Google's Material Design-inspired notifications. @@ -12,7 +6,6 @@ */ .fl-google { /* Theme variables - Define the visual appearance of Material Design notifications */ - /* Base colors and appearance for light and dark modes */ --md-bg-light: #ffffff; /* Card background in light mode */ --md-bg-dark: #2d2d2d; /* Card background in dark mode */ @@ -20,29 +13,23 @@ --md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode (60% black) */ --md-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode (87% white) */ --md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark mode (60% white) */ - /* Material Design elevation - multi-layered shadows */ --md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), /* Ambient shadow */ 0 6px 10px 0 rgba(0,0,0,0.14), /* Penumbra shadow */ 0 1px 18px 0 rgba(0,0,0,0.12); /* Umbra shadow */ - --md-elevation-dark: 0 3px 5px -1px rgba(0,0,0,0.4), /* Darker ambient shadow */ 0 6px 10px 0 rgba(0,0,0,0.28), /* Darker penumbra shadow */ 0 1px 18px 0 rgba(0,0,0,0.24); /* Darker umbra shadow */ --md-border-radius: 4px; /* Material Design default corner radius */ - /* Material Design color palette for notification types */ --md-success: #43a047; /* Green 600 from Material palette */ --md-info: #1e88e5; /* Blue 600 from Material palette */ --md-warning: #fb8c00; /* Orange 600 from Material palette */ --md-error: #e53935; /* Red 600 from Material palette */ - /* Animation timing variables */ --md-animation-duration: 0.3s; /* Standard Material motion duration */ --md-ripple-duration: 0.6s; /* Ripple effect duration */ } - -/** * Entrance animation for Google theme * Material Design-style slide up with easing */ @@ -56,8 +43,6 @@ transform: translateY(0); /* End at final position */ } } - -/** * Material Design ripple effect animation * Creates expanding circle from point of interaction */ @@ -67,8 +52,6 @@ opacity: 0; /* Fade out completely */ } } - -/** * Base Google Material Design theme styling */ .fl-google { @@ -76,7 +59,6 @@ margin: 8px 0; /* Spacing between notifications */ font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif; /* Material uses Roboto */ animation: mdSlideUp var(--md-animation-duration) cubic-bezier(0.4, 0, 0.2, 1); /* Material standard easing */ - /** * Main card container * Follows Material Design card component styling @@ -88,7 +70,6 @@ box-shadow: var(--md-elevation); /* Multi-layered shadow for depth */ overflow: hidden; /* Contains progress bar */ } - /** * Content section * Contains icon and text content @@ -98,7 +79,6 @@ display: flex; align-items: flex-start; /* Align items to top */ } - /** * Icon container * Holds the Material Design SVG icon @@ -108,7 +88,6 @@ color: var(--md-text-secondary-light); /* Default icon color */ flex-shrink: 0; /* Prevent icon from shrinking */ } - /** * Text content container * Holds title and message @@ -116,7 +95,6 @@ .fl-text-content { flex: 1; /* Take available space */ } - /** * Title styling * Following Material Design typography @@ -126,7 +104,6 @@ font-weight: 500; /* Medium weight per Material guidelines */ margin-bottom: 4px; } - /** * Message styling * Following Material Design typography @@ -136,7 +113,6 @@ line-height: 1.43; /* Material line height for body 2 */ color: var(--md-text-secondary-light); /* Secondary text color (60% opacity) */ } - /** * Action buttons section * Contains dismiss button @@ -146,7 +122,6 @@ justify-content: flex-end; /* Align buttons to right */ padding: 8px; /* Standard Material padding */ } - /** * Action button styling * Following Material Design "text button" guidelines @@ -166,11 +141,9 @@ transition: background-color 0.2s; /* Smooth hover effect */ position: relative; /* For ripple positioning */ overflow: hidden; /* Contain ripple effect */ - &:hover, &:focus { background-color: rgba(0, 0, 0, 0.04); /* Material hover state - 4% opacity */ } - /** * Ripple effect * Material Design's signature ink ripple on interaction @@ -186,13 +159,11 @@ transform: scale(1); pointer-events: none; /* Don't interfere with clicks */ } - &:active::after { opacity: 0.3; /* Material ripple opacity */ animation: mdRipple var(--md-ripple-duration) linear; /* Expand and fade */ } } - /** * Type-specific styling * Each notification type has its own color based on Material palette @@ -201,42 +172,34 @@ .fl-icon-wrapper { color: var(--md-success); /* Green icon */ } - .fl-action-button { color: var(--md-success); /* Green button */ } } - &.fl-info { .fl-icon-wrapper { color: var(--md-info); /* Blue icon */ } - .fl-action-button { color: var(--md-info); /* Blue button */ } } - &.fl-warning { .fl-icon-wrapper { color: var(--md-warning); /* Orange icon */ } - .fl-action-button { color: var(--md-warning); /* Orange button */ } } - &.fl-error { .fl-icon-wrapper { color: var(--md-error); /* Red icon */ } - .fl-action-button { color: var(--md-error); /* Red button */ } } - /** * Progress bar * Material Design linear progress indicator @@ -248,14 +211,12 @@ right: 0; height: 4px; /* Material's standard progress height */ overflow: hidden; - .fl-progress { height: 100%; width: 100%; transform-origin: left center; /* Animation starts from left */ } } - /** * Type-specific progress colors * Each notification type has its own progress bar color @@ -263,58 +224,46 @@ &.fl-success .fl-progress { background-color: var(--md-success); /* Green progress */ } - &.fl-info .fl-progress { background-color: var(--md-info); /* Blue progress */ } - &.fl-warning .fl-progress { background-color: var(--md-warning); /* Orange progress */ } - &.fl-error .fl-progress { background-color: var(--md-error); /* Red progress */ } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-content { flex-direction: row-reverse; /* Reverse flex direction */ } - .fl-icon-wrapper { margin-right: 0; margin-left: 16px; /* Swap margins for RTL */ } - .fl-actions { justify-content: flex-start; /* Align buttons to left in RTL */ } - .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences */ @media (prefers-reduced-motion: reduce) { animation: none; /* Disable slide animation */ - .fl-action-button:active::after { animation: none; /* Disable ripple animation */ } } } - -/** * Dark mode support * Material Design dark theme implementation */ @@ -326,11 +275,9 @@ html.fl-dark .fl-google, color: var(--md-text-dark); /* Lighter text */ box-shadow: var(--md-elevation-dark); /* Stronger shadows */ } - .fl-message { color: var(--md-text-secondary-dark); /* Lighter secondary text */ } - .fl-action-button { &:hover, &:focus { background-color: rgba(255, 255, 255, 0.08); /* Material dark hover - 8% opacity */ diff --git a/src/Prime/Resources/assets/themes/google/google.ts b/src/Prime/Resources/assets/themes/google/google.ts index beea4e2e..1081795f 100644 --- a/src/Prime/Resources/assets/themes/google/google.ts +++ b/src/Prime/Resources/assets/themes/google/google.ts @@ -1,65 +1,16 @@ -/** - * @file PHPFlasher Google Theme Implementation - * @description Material Design-inspired notification theme - * @author Younes ENNAJI - */ import './google.scss' import type { Envelope } from '../../types' -/** - * Google Material Design-inspired notification theme for PHPFlasher. - * - * This theme replicates Google's Material Design aesthetics with: - * - Elevated card component with proper shadow depth - * - Material Design iconography - * - Google's typography system with Roboto font - * - Material "ink ripple" effect on buttons - * - UPPERCASE action buttons following Material guidelines - * - Smooth animation with Material Design's motion patterns - * - * The theme follows Material Design specifications for components like - * cards, buttons, typography and iconography, creating a familiar experience - * for users of Google products. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { googleTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('google', googleTheme); - * - * // Use the theme - * flasher.use('theme.google').success('Operation completed successfully'); - * ``` - */ export const googleTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a Google Material Design-style notification with icon, title (optional), - * message, dismissal button, and progress indicator. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message, title } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' - // Action button text in Material Design style (uppercase) const actionText = 'DISMISS' - /** - * Gets the appropriate Material Design icon based on notification type. - * Each icon follows Google's Material Design iconography guidelines. - * - * @returns SVG markup for the notification icon - */ const getIcon = () => { switch (type) { case 'success': @@ -82,7 +33,6 @@ export const googleTheme = { return '' } - // Generate title section if title is provided const titleSection = title ? `
${title}
` : '' return ` diff --git a/src/Prime/Resources/assets/themes/google/index.ts b/src/Prime/Resources/assets/themes/google/index.ts index 5cef8922..0e80f035 100644 --- a/src/Prime/Resources/assets/themes/google/index.ts +++ b/src/Prime/Resources/assets/themes/google/index.ts @@ -1,28 +1,4 @@ -/** - * @file PHPFlasher Google Theme Registration - * @description Registers the Google theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { googleTheme } from './google' -/** - * Register the Google theme. - * - * This theme provides notifications styled after Google's Material Design system. - * The registration makes the theme available under the name 'google'. - * - * The Google theme can be used by calling: - * ```typescript - * flasher.use('theme.google').success('Operation completed successfully'); - * ``` - * - * Key features: - * - Material Design card with proper elevation - * - Google's typography system with Roboto font - * - Material Design icons and color palette - * - Ripple effect on interaction - * - UPPERCASE action button text - * - Proper implementation of Material Design light and dark themes - */ flasher.addTheme('google', googleTheme) diff --git a/src/Prime/Resources/assets/themes/icons.scss b/src/Prime/Resources/assets/themes/icons.scss index dae941bd..0edca318 100644 --- a/src/Prime/Resources/assets/themes/icons.scss +++ b/src/Prime/Resources/assets/themes/icons.scss @@ -1,13 +1,3 @@ -/** - * @file PHPFlasher Icon Styles - * @description Icon styling for different notification types - * @author Younes ENNAJI - */ - -/** - * Base icon styling - * Shared properties for all notification icons - */ .fl-icon { position: relative; box-sizing: border-box; @@ -31,10 +21,6 @@ } } -/** - * Success checkmark icon - * Creates a checkmark (✓) symbol using CSS - */ .fl-success .fl-icon { &::before, &::after { @@ -54,10 +40,6 @@ } } -/** - * Info icon - * Creates an information (i) symbol using CSS - */ .fl-info .fl-icon { &::before, &::after { @@ -80,10 +62,6 @@ } } -/** - * Warning icon - * Creates an exclamation (!) symbol using CSS - */ .fl-warning .fl-icon { &::before, &::after { @@ -105,10 +83,6 @@ } } -/** - * Error X icon - * Creates an X symbol using CSS - */ .fl-error .fl-icon { &::before, &::after { @@ -126,10 +100,6 @@ } } -/** - * Icon background colors - * Sets the background color for each notification type's icon - */ @each $type in success, info, warning, error { .fl-#{$type} .fl-icon { background-color: var(--#{$type}-color, var(--fl-#{$type})); diff --git a/src/Prime/Resources/assets/themes/index.scss b/src/Prime/Resources/assets/themes/index.scss index 031a2d7c..cd0a262e 100644 --- a/src/Prime/Resources/assets/themes/index.scss +++ b/src/Prime/Resources/assets/themes/index.scss @@ -1,32 +1,17 @@ -/** - * @file PHPFlasher Core Theme Styles - * @description Root styling and CSS variables for the PHPFlasher notification system - * @author Younes ENNAJI - */ - @use "sass:color"; @use "sass:meta"; -/** - * PHPFlasher CSS Variable System - * - * This defines the design token system used throughout all themes. - * By changing these variables, you can customize the appearance of all themes. - */ :root { - // State Colors - Used for different notification types - --fl-success: #10b981; // Green for success messages - --fl-info: #3b82f6; // Blue for information messages - --fl-warning: #f59e0b; // Amber for warning messages - --fl-error: #ef4444; // Red for error messages + --fl-success: #10b981; + --fl-info: #3b82f6; + --fl-warning: #f59e0b; + --fl-error: #ef4444; - // Light variants - Used for backgrounds and progress bars --fl-success-light: color-mix(in srgb, var(--fl-success) 10%, transparent); --fl-info-light: color-mix(in srgb, var(--fl-info) 10%, transparent); --fl-warning-light: color-mix(in srgb, var(--fl-warning) 10%, transparent); --fl-error-light: color-mix(in srgb, var(--fl-error) 10%, transparent); - // Base colors - Used for text and backgrounds --fl-white: #ffffff; --fl-black: #000000; --fl-bg-light: var(--fl-white); @@ -34,14 +19,12 @@ --fl-text-light: rgb(75, 85, 99); --fl-text-dark: var(--fl-white); - // Appearance - Used for consistent styling across themes --fl-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --fl-border-radius: 4px; --fl-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --fl-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.35); --fl-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); - // Legacy Support - For backward compatibility --background-color: var(--fl-bg-light); --text-color: var(--fl-text-light); --dark-background-color: var(--fl-bg-dark); @@ -56,7 +39,6 @@ --error-color-light: var(--fl-error-light); } -// Import component styles @include meta.load-css("wrapper"); @include meta.load-css("container"); @include meta.load-css("progress"); diff --git a/src/Prime/Resources/assets/themes/index.ts b/src/Prime/Resources/assets/themes/index.ts index 307070d4..ee9927da 100644 --- a/src/Prime/Resources/assets/themes/index.ts +++ b/src/Prime/Resources/assets/themes/index.ts @@ -1,24 +1,3 @@ -/** - * @file PHPFlasher Theme Exports - * @description Exports all available notification themes - * @author Younes ENNAJI - */ - -/** - * Export all available themes for PHPFlasher. - * - * These themes provide different visual styles for notifications and can be - * used by specifying the theme name when showing a notification: - * - * @example - * ```typescript - * // Use a specific theme - * flasher.use('theme.material').success('Operation completed'); - * - * // Set a theme as default - * flasher.addPlugin('flasher', flasher.use('theme.slack')); - * ``` - */ export { amazonTheme } from './amazon/amazon' export { amberTheme } from './amber/amber' export { auroraTheme } from './aurora/aurora' diff --git a/src/Prime/Resources/assets/themes/ios/index.ts b/src/Prime/Resources/assets/themes/ios/index.ts index 909b1905..114bd39d 100644 --- a/src/Prime/Resources/assets/themes/ios/index.ts +++ b/src/Prime/Resources/assets/themes/ios/index.ts @@ -1,28 +1,4 @@ -/** - * @file PHPFlasher iOS Theme Registration - * @description Registers the iOS theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { iosTheme } from './ios' -/** - * Register the iOS theme. - * - * This theme provides notifications styled after Apple's iOS notification system. - * The registration makes the theme available under the name 'ios'. - * - * The iOS theme can be used by calling: - * ```typescript - * flasher.use('theme.ios').success('Your file was uploaded successfully'); - * ``` - * - * Key features: - * - Frosted glass effect with backdrop blur - * - App icon and name in header - * - Time display in iOS style - * - Subtle animations mimicking iOS notification behavior - * - iOS-style close button - * - Full dark mode support following iOS dark appearance - */ flasher.addTheme('ios', iosTheme) diff --git a/src/Prime/Resources/assets/themes/ios/ios.scss b/src/Prime/Resources/assets/themes/ios/ios.scss index 96ad8901..c162823d 100644 --- a/src/Prime/Resources/assets/themes/ios/ios.scss +++ b/src/Prime/Resources/assets/themes/ios/ios.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher iOS Theme Styles - * @description CSS styling for Apple iOS-inspired notifications - * @author Younes ENNAJI */ - -/** * PHPFlasher - iOS Theme * * Clean, sleek notifications inspired by Apple's iOS design language. @@ -12,7 +6,6 @@ */ .fl-ios { /* Theme variables - Define the visual appearance of iOS notifications */ - /* Base colors and appearance */ --ios-bg-light: rgba(255, 255, 255); /* Semi-transparent white in light mode */ --ios-bg-dark: rgba(30, 30, 30); /* Semi-transparent dark in dark mode */ @@ -25,18 +18,14 @@ --ios-shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.35); /* Darker shadow in dark mode */ --ios-icon-size: 18px; /* Size for icons */ --ios-blur: 30px; /* Amount of backdrop blur for glass effect */ - /* Type-specific colors following iOS palette */ --ios-success: #34c759; /* iOS green */ --ios-info: #007aff; /* iOS blue */ --ios-warning: #ff9500; /* iOS orange */ --ios-error: #ff3b30; /* iOS red */ - /* Animation timing */ --ios-animation-duration: 0.4s; /* Duration for entrance animation */ } - -/** * Slide-in entrance animation for iOS theme * Combines movement, scaling, and fade for realistic iOS appearance */ @@ -50,8 +39,6 @@ transform: translateY(0) scale(1); /* End at normal size and position */ } } - -/** * Content expansion animation * Creates a subtle unfold effect for the notification content */ @@ -65,8 +52,6 @@ opacity: 1; /* Fade in */ } } - -/** * Base iOS theme styling */ .fl-ios { @@ -75,7 +60,6 @@ font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Apple system fonts */ animation: iosSlideIn var(--ios-animation-duration) cubic-bezier(0.23, 1, 0.32, 1); /* iOS-like easing */ will-change: transform, opacity; /* Optimize for animation performance */ - /** * Main notification container * Replicates iOS notification card with frosted glass effect @@ -87,12 +71,10 @@ box-shadow: var(--ios-shadow); padding: 12px 15px; position: relative; - /* iOS-typical frosted glass effect */ backdrop-filter: blur(var(--ios-blur)); -webkit-backdrop-filter: blur(var(--ios-blur)); } - /** * Header section * Contains app icon, app name, and timestamp @@ -103,7 +85,6 @@ margin-bottom: 8px; padding-right: 20px; /* Space for close button */ } - /** * App icon container * Square with rounded corners like iOS app icons @@ -119,7 +100,6 @@ justify-content: center; flex-shrink: 0; /* Prevent icon from shrinking */ } - /** * SVG icon styling * White icon on colored background @@ -129,7 +109,6 @@ width: 14px; height: 14px; } - /** * App info container * Holds app name and timestamp @@ -140,7 +119,6 @@ justify-content: space-between; flex: 1; } - /** * App name styling * Bold text like in iOS notifications @@ -149,7 +127,6 @@ font-weight: 600; /* Semi-bold like iOS */ font-size: 0.85rem; /* iOS app name size */ } - /** * Time display * Shows current time in iOS style @@ -160,7 +137,6 @@ margin-left: 5px; flex-shrink: 0; /* Prevent time from wrapping */ } - /** * Content/message area * Contains the notification message @@ -170,7 +146,6 @@ animation-delay: 0.1s; /* Slight delay for sequenced animation */ overflow: hidden; /* Contain expansion animation */ } - /** * Message styling * Main notification text @@ -181,7 +156,6 @@ margin: 0; padding-right: 15px; /* Space for close button */ } - /** * Close button styling * Circular close button like in iOS @@ -205,12 +179,10 @@ cursor: pointer; transition: opacity 0.2s; padding: 0; - &:hover, &:focus { opacity: 1; /* Full opacity on hover/focus */ } } - /** * Type-specific styling * Each notification type gets its own app icon color @@ -220,72 +192,60 @@ color: var(--ios-success); /* Green for success */ } } - &.fl-info { .fl-app-icon { color: var(--ios-info); /* Blue for info */ } } - &.fl-warning { .fl-app-icon { color: var(--ios-warning); /* Orange for warning */ } } - &.fl-error { .fl-app-icon { color: var(--ios-error); /* Red for error */ } } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-header { padding-right: 0; padding-left: 20px; /* Swap padding for RTL */ } - .fl-app-icon { margin-right: 0; margin-left: 8px; /* Swap margins for RTL */ } - .fl-time { margin-left: 0; margin-right: 5px; /* Swap margins for RTL */ } - .fl-message { padding-right: 0; padding-left: 15px; /* Swap padding for RTL */ } - .fl-close { right: auto; left: 12px; /* Move close button to left for RTL */ } } - /** * Accessibility * Respects reduced motion preferences */ @media (prefers-reduced-motion: reduce) { animation: none; /* Disable entrance animation */ - .fl-content { animation: none; /* Disable content expansion */ max-height: none; /* Show full content */ opacity: 1; /* Ensure content is visible */ } } - /** * Mobile optimization * Full width on small screens @@ -294,8 +254,6 @@ width: 100%; /* Full width on mobile */ } } - -/** * Dark mode support * iOS-style dark appearance */ @@ -307,11 +265,9 @@ html.fl-dark .fl-ios, color: var(--ios-text-dark); /* Light text */ box-shadow: var(--ios-shadow-dark); /* Stronger shadow */ } - .fl-time { color: var(--ios-text-secondary-dark); /* Lighter secondary text */ } - .fl-close { background-color: rgba(255, 255, 255, 0.2); /* Lighter background for close button */ color: var(--ios-text-dark); /* Light text color */ diff --git a/src/Prime/Resources/assets/themes/ios/ios.ts b/src/Prime/Resources/assets/themes/ios/ios.ts index 680e2df3..876c4871 100644 --- a/src/Prime/Resources/assets/themes/ios/ios.ts +++ b/src/Prime/Resources/assets/themes/ios/ios.ts @@ -1,68 +1,19 @@ -/** - * @file PHPFlasher iOS Theme Implementation - * @description Apple iOS-style notification interface - * @author Younes ENNAJI - */ import './ios.scss' import type { Envelope } from '../../types' -/** - * iOS-inspired notification theme for PHPFlasher. - * - * This theme replicates Apple's iOS notification style with: - * - Frosted glass appearance with backdrop blur - * - App icon and name header - * - Current time display - * - Subtle animations and transitions - * - Close button in iOS style - * - Full dark mode support (resembles iOS dark mode) - * - * The theme aims to provide a native-like experience for users familiar with - * iOS devices, creating notifications that feel integrated with the platform. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { iosTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('ios', iosTheme); - * - * // Use the theme - * flasher.use('theme.ios').success('Your photo was uploaded successfully'); - * ``` - */ export const iosTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates an iOS-style notification with app icon, title/app name, - * timestamp, message content, and close button. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message, title } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' - // Default app name (used if no title is provided) const appName = 'PHPFlasher' - // Format current time in iOS style (hour:minute) const now = new Date() const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) - /** - * Gets the appropriate icon based on notification type. - * Each type has a specific icon matching iOS visual style. - * - * @returns SVG markup for the notification icon - */ const getIcon = () => { switch (type) { case 'success': @@ -85,7 +36,6 @@ export const iosTheme = { return '' } - // Use provided title or default to the app name const displayTitle = title || appName return ` diff --git a/src/Prime/Resources/assets/themes/jade/index.ts b/src/Prime/Resources/assets/themes/jade/index.ts index 1c4097e5..684eeb88 100644 --- a/src/Prime/Resources/assets/themes/jade/index.ts +++ b/src/Prime/Resources/assets/themes/jade/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Jade Theme Registration - * @description Registers the Jade theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { jadeTheme } from './jade' -/** - * Register the Jade theme. - * - * This theme provides a calm, minimalist notification style with - * soft colors and refined animations. - * - * The registration makes the theme available under the name 'jade'. - * - * The Jade theme can be used by calling: - * ```typescript - * flasher.use('theme.jade').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Clean, minimalist design with no icons - * - Soft color palette with pastel tones - * - Generous rounded corners for a friendly appearance - * - Subtle entrance animation with scale and fade effects - * - Type-specific background and text colors - */ flasher.addTheme('jade', jadeTheme) diff --git a/src/Prime/Resources/assets/themes/jade/jade.scss b/src/Prime/Resources/assets/themes/jade/jade.scss index 7bf6d47b..e0173459 100644 --- a/src/Prime/Resources/assets/themes/jade/jade.scss +++ b/src/Prime/Resources/assets/themes/jade/jade.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Jade Theme Styles - * @description CSS styling for minimalist Jade theme - * @author Younes ENNAJI */ - -/** * PHPFlasher - Jade Theme * * Calm, soothing notification style with elegant minimalism. @@ -12,7 +6,6 @@ */ .fl-jade { /* Theme variables - Define the visual appearance of Jade notifications */ - /* Base colors and appearance */ --jade-text-light: #5f6c7b; /* Soft slate gray for text */ --jade-text-dark: #e2e8f0; /* Light gray for dark mode text */ @@ -20,7 +13,6 @@ --jade-shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.2); /* Stronger shadow for dark mode */ --jade-border-radius: 4px; /* Large rounded corners */ --jade-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Material-inspired transition */ - /* Type-specific colors and backgrounds - Light mode */ --jade-success-bg: #f0fdf4; /* Very light green background */ --jade-success-color: #16a34a; /* Green text */ @@ -30,15 +22,12 @@ --jade-warning-color: #f59e0b; /* Orange text */ --jade-error-bg: #fef2f2; /* Very light red background */ --jade-error-color: #dc2626; /* Red text */ - /* Dark mode backgrounds - Semi-transparent colored overlays */ --jade-success-bg-dark: rgba(22, 163, 74, 0.15); /* Semi-transparent green */ --jade-info-bg-dark: rgba(59, 130, 246, 0.15); /* Semi-transparent blue */ --jade-warning-bg-dark: rgba(245, 158, 11, 0.15); /* Semi-transparent orange */ --jade-error-bg-dark: rgba(220, 38, 38, 0.15); /* Semi-transparent red */ } - -/** * Entrance animation for Jade theme * Combines subtle upward movement with scaling for a refined appearance */ @@ -52,8 +41,6 @@ transform: translateY(0) scale(1); /* End at normal size and position */ } } - -/** * Base Jade theme styling */ .fl-jade { @@ -67,7 +54,6 @@ will-change: transform, opacity; /* Optimize for animation performance */ border: 1px solid transparent; /* Border for type-specific colors */ overflow: hidden; /* Contain progress bar */ - /** * Content container * Holds message and close button @@ -76,7 +62,6 @@ display: flex; align-items: center; /* Vertically center content */ } - /** * Message styling * Main notification text @@ -88,7 +73,6 @@ font-weight: 500; /* Medium weight for better readability */ padding-right: 0.75rem; /* Space between text and close button */ } - /** * Close button styling * Circular button with hover effect @@ -108,13 +92,11 @@ align-items: center; justify-content: center; flex-shrink: 0; /* Prevent button from shrinking */ - &:hover, &:focus { opacity: 1; /* Full opacity on hover/focus */ background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */ } } - /** * Progress bar container * Holds the animated progress indicator @@ -128,7 +110,6 @@ overflow: hidden; border-radius: 0 0 var(--jade-border-radius) var(--jade-border-radius); /* Match parent corners */ opacity: 0.7; /* Slightly transparent */ - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -138,9 +119,7 @@ width: 100%; } } - /* Type-specific styling for each notification type */ - /** * Success notification styling * Green theme with appropriate hover states @@ -149,20 +128,16 @@ background-color: var(--jade-success-bg); color: var(--jade-success-color); border-color: rgba(22, 163, 74, 0.1); /* Very subtle border */ - .fl-close { color: var(--jade-success-color); /* Green close button */ - &:hover, &:focus { background-color: rgba(22, 163, 74, 0.1); /* Green hover state */ } } - .fl-progress-bar .fl-progress { background-color: var(--jade-success-color); /* Green progress bar */ } } - /** * Info notification styling * Blue theme with appropriate hover states @@ -171,20 +146,16 @@ background-color: var(--jade-info-bg); color: var(--jade-info-color); border-color: rgba(59, 130, 246, 0.1); /* Very subtle border */ - .fl-close { color: var(--jade-info-color); /* Blue close button */ - &:hover, &:focus { background-color: rgba(59, 130, 246, 0.1); /* Blue hover state */ } } - .fl-progress-bar .fl-progress { background-color: var(--jade-info-color); /* Blue progress bar */ } } - /** * Warning notification styling * Orange theme with appropriate hover states @@ -193,20 +164,16 @@ background-color: var(--jade-warning-bg); color: var(--jade-warning-color); border-color: rgba(245, 158, 11, 0.1); /* Very subtle border */ - .fl-close { color: var(--jade-warning-color); /* Orange close button */ - &:hover, &:focus { background-color: rgba(245, 158, 11, 0.1); /* Orange hover state */ } } - .fl-progress-bar .fl-progress { background-color: var(--jade-warning-color); /* Orange progress bar */ } } - /** * Error notification styling * Red theme with appropriate hover states @@ -215,37 +182,30 @@ background-color: var(--jade-error-bg); color: var(--jade-error-color); border-color: rgba(220, 38, 38, 0.1); /* Very subtle border */ - .fl-close { color: var(--jade-error-color); /* Red close button */ - &:hover, &:focus { background-color: rgba(220, 38, 38, 0.1); /* Red hover state */ } } - .fl-progress-bar .fl-progress { background-color: var(--jade-error-color); /* Red progress bar */ } } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-message { padding-right: 0; padding-left: 0.75rem; /* Swap padding for RTL */ } - .fl-progress .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences @@ -254,8 +214,6 @@ animation: none; /* Disable animation */ } } - -/** * Dark mode support * Different styling when in dark mode */ @@ -264,7 +222,6 @@ html.fl-dark .fl-jade, .fl-jade.fl-auto-dark { box-shadow: var(--jade-shadow-dark); /* Stronger shadow in dark mode */ color: var(--jade-text-dark); /* Lighter text */ - /** * Type-specific backgrounds for dark mode * Uses semi-transparent colored overlays @@ -273,22 +230,18 @@ html.fl-dark .fl-jade, background-color: var(--jade-success-bg-dark); border-color: rgba(22, 163, 74, 0.2); /* Slightly stronger border */ } - &.fl-info { background-color: var(--jade-info-bg-dark); border-color: rgba(59, 130, 246, 0.2); /* Slightly stronger border */ } - &.fl-warning { background-color: var(--jade-warning-bg-dark); border-color: rgba(245, 158, 11, 0.2); /* Slightly stronger border */ } - &.fl-error { background-color: var(--jade-error-bg-dark); border-color: rgba(220, 38, 38, 0.2); /* Slightly stronger border */ } - /** * Dark mode hover states * Lighter background for better visibility diff --git a/src/Prime/Resources/assets/themes/jade/jade.ts b/src/Prime/Resources/assets/themes/jade/jade.ts index 8a08e5ae..74d0273a 100644 --- a/src/Prime/Resources/assets/themes/jade/jade.ts +++ b/src/Prime/Resources/assets/themes/jade/jade.ts @@ -1,56 +1,10 @@ -/** - * @file PHPFlasher Jade Theme Implementation - * @description Minimalist notification theme with soft, natural aesthetics - * @author Younes ENNAJI - */ import './jade.scss' import type { Envelope } from '../../types' -/** - * Jade notification theme for PHPFlasher. - * - * The Jade theme provides a clean, minimal aesthetic with: - * - Soft, pastel color palette inspired by natural tones - * - Generous border radius for a friendly appearance - * - Subtle entrance animation with scale and fade - * - Type-specific colored backgrounds and text - * - Minimalist layout without icons for a clean look - * - Refined hover interactions and transitions - * - * This theme prioritizes readability and calmness, making it - * ideal for applications where subtle notifications are preferred. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { jadeTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('jade', jadeTheme); - * - * // Use the theme - * flasher.use('theme.jade').success('Your changes have been saved'); - * ``` - */ export const jadeTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a clean, minimal notification with just the essential elements: - * - Message text - * - Close button - * - Progress indicator - * - * The Jade theme deliberately omits icons and titles for a more streamlined - * appearance, focusing purely on the message content. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/material/index.ts b/src/Prime/Resources/assets/themes/material/index.ts index f7101081..57aae438 100644 --- a/src/Prime/Resources/assets/themes/material/index.ts +++ b/src/Prime/Resources/assets/themes/material/index.ts @@ -1,28 +1,4 @@ -/** - * @file PHPFlasher Material Design Theme Registration - * @description Registers the Material Design theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { materialTheme } from './material' -/** - * Register the Material Design theme. - * - * This theme provides minimalist notifications styled after Google's Material Design system. - * The registration makes the theme available under the name 'material'. - * - * The Material theme can be used by calling: - * ```typescript - * flasher.use('theme.material').success('Operation completed successfully'); - * ``` - * - * Key features: - * - Clean Material Design card with proper elevation - * - Material typography system with Roboto font - * - UPPERCASE action button text following Material guidelines - * - Ripple effect on button interaction - * - Linear progress indicator - * - Minimalist design without icons - */ flasher.addTheme('material', materialTheme) diff --git a/src/Prime/Resources/assets/themes/material/material.scss b/src/Prime/Resources/assets/themes/material/material.scss index 78341160..0fb8a9c5 100644 --- a/src/Prime/Resources/assets/themes/material/material.scss +++ b/src/Prime/Resources/assets/themes/material/material.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Material Design Theme Styles - * @description CSS styling for minimalist Material Design notifications - * @author Younes ENNAJI */ - -/** * PHPFlasher - Material Design Theme * * Google's Material Design-inspired notifications with a minimalist approach. @@ -12,7 +6,6 @@ */ .fl-material { /* Theme variables - Define the visual appearance of Material Design notifications */ - /* Base colors and appearance for light and dark modes */ --md-bg-light: #ffffff; /* Card background in light mode */ --md-bg-dark: #2d2d2d; /* Card background in dark mode */ @@ -20,29 +13,23 @@ --md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode (60% black) */ --md-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode (87% white) */ --md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark mode (60% white) */ - /* Material Design elevation - multi-layered shadows */ --md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), /* Ambient shadow */ 0 6px 10px 0 rgba(0,0,0,0.14), /* Penumbra shadow */ 0 1px 18px 0 rgba(0,0,0,0.12); /* Umbra shadow */ - --md-elevation-dark: 0 3px 5px -1px rgba(0,0,0,0.4), /* Darker ambient shadow */ 0 6px 10px 0 rgba(0,0,0,0.28), /* Darker penumbra shadow */ 0 1px 18px 0 rgba(0,0,0,0.24); /* Darker umbra shadow */ --md-border-radius: 4px; /* Material Design default corner radius */ - /* Material Design color palette for notification types */ --md-success: #43a047; /* Green 600 from Material palette */ --md-info: #1e88e5; /* Blue 600 from Material palette */ --md-warning: #fb8c00; /* Orange 600 from Material palette */ --md-error: #e53935; /* Red 600 from Material palette */ - /* Animation timing variables */ --md-animation-duration: 0.3s; /* Standard Material motion duration */ --md-ripple-duration: 0.6s; /* Ripple effect duration */ } - -/** * Entrance animation for Material theme * Material Design-style slide up with easing */ @@ -56,8 +43,6 @@ transform: translateY(0); /* End at final position */ } } - -/** * Material Design ripple effect animation * Creates expanding circle from point of interaction */ @@ -67,8 +52,6 @@ opacity: 0; /* Fade out completely */ } } - -/** * Base Material Design theme styling */ .fl-material { @@ -76,7 +59,6 @@ margin: 8px 0; /* Spacing between notifications */ font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif; /* Material uses Roboto */ animation: mdSlideUp var(--md-animation-duration) cubic-bezier(0.4, 0, 0.2, 1); /* Material standard easing */ - /** * Main card container * Follows Material Design card component styling @@ -88,7 +70,6 @@ box-shadow: var(--md-elevation); /* Multi-layered shadow for depth */ overflow: hidden; /* Contains progress bar */ } - /** * Content section * Contains message text @@ -98,7 +79,6 @@ display: flex; align-items: flex-start; /* Align items to top */ } - /** * Text content container * Holds message @@ -106,7 +86,6 @@ .fl-text-content { flex: 1; /* Take available space */ } - /** * Message styling * Following Material Design typography @@ -116,7 +95,6 @@ line-height: 1.43; /* Material line height for body 2 */ color: var(--md-text-secondary-light); /* Secondary text color (60% opacity) */ } - /** * Action buttons section * Contains dismiss button @@ -126,7 +104,6 @@ justify-content: flex-end; /* Align buttons to right */ padding: 8px; /* Standard Material padding */ } - /** * Action button styling * Following Material Design "text button" guidelines @@ -146,11 +123,9 @@ transition: background-color 0.2s; /* Smooth hover effect */ position: relative; /* For ripple positioning */ overflow: hidden; /* Contain ripple effect */ - &:hover, &:focus { background-color: rgba(0, 0, 0, 0.04); /* Material hover state - 4% opacity */ } - /** * Ripple effect * Material Design's signature ink ripple on interaction @@ -166,13 +141,11 @@ transform: scale(1); pointer-events: none; /* Don't interfere with clicks */ } - &:active::after { opacity: 0.3; /* Material ripple opacity */ animation: mdRipple var(--md-ripple-duration) linear; /* Expand and fade */ } } - /** * Type-specific styling * Each notification type has its own color based on Material palette @@ -181,42 +154,34 @@ .fl-icon-wrapper { color: var(--md-success); /* Green icon */ } - .fl-action-button { color: var(--md-success); /* Green button */ } } - &.fl-info { .fl-icon-wrapper { color: var(--md-info); /* Blue icon */ } - .fl-action-button { color: var(--md-info); /* Blue button */ } } - &.fl-warning { .fl-icon-wrapper { color: var(--md-warning); /* Orange icon */ } - .fl-action-button { color: var(--md-warning); /* Orange button */ } } - &.fl-error { .fl-icon-wrapper { color: var(--md-error); /* Red icon */ } - .fl-action-button { color: var(--md-error); /* Red button */ } } - /** * Progress bar * Material Design linear progress indicator @@ -228,14 +193,12 @@ right: 0; height: 4px; /* Material's standard progress height */ overflow: hidden; - .fl-progress { height: 100%; width: 100%; transform-origin: left center; /* Animation starts from left */ } } - /** * Type-specific progress colors * Each notification type has its own progress bar color @@ -243,58 +206,46 @@ &.fl-success .fl-progress { background-color: var(--md-success); /* Green progress */ } - &.fl-info .fl-progress { background-color: var(--md-info); /* Blue progress */ } - &.fl-warning .fl-progress { background-color: var(--md-warning); /* Orange progress */ } - &.fl-error .fl-progress { background-color: var(--md-error); /* Red progress */ } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-content { flex-direction: row-reverse; /* Reverse flex direction */ } - .fl-icon-wrapper { margin-right: 0; margin-left: 16px; /* Swap margins for RTL */ } - .fl-actions { justify-content: flex-start; /* Align buttons to left in RTL */ } - .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences */ @media (prefers-reduced-motion: reduce) { animation: none; /* Disable slide animation */ - .fl-action-button:active::after { animation: none; /* Disable ripple animation */ } } } - -/** * Dark mode support * Material Design dark theme implementation */ @@ -306,11 +257,9 @@ html.fl-dark .fl-material, color: var(--md-text-dark); /* Lighter text */ box-shadow: var(--md-elevation-dark); /* Stronger shadows */ } - .fl-message { color: var(--md-text-secondary-dark); /* Lighter secondary text */ } - .fl-action-button { &:hover, &:focus { background-color: rgba(255, 255, 255, 0.08); /* Material dark hover - 8% opacity */ diff --git a/src/Prime/Resources/assets/themes/material/material.ts b/src/Prime/Resources/assets/themes/material/material.ts index fe70550e..f2965796 100644 --- a/src/Prime/Resources/assets/themes/material/material.ts +++ b/src/Prime/Resources/assets/themes/material/material.ts @@ -1,57 +1,14 @@ -/** - * @file PHPFlasher Material Design Theme Implementation - * @description Minimalist Material Design notification theme - * @author Younes ENNAJI - */ import './material.scss' import type { Envelope } from '../../types' -/** - * Material Design notification theme for PHPFlasher. - * - * This theme implements Google's Material Design principles with a minimalist approach: - * - Clean card design with proper elevation shadow - * - Material Design typography with Roboto font - * - UPPERCASE action button following Material guidelines - * - Material "ink ripple" effect on button press - * - Material motion patterns for animations - * - Linear progress indicator - * - * Unlike the more comprehensive Google theme, this Material theme - * provides a simpler, more streamlined appearance without icons, - * focusing purely on the message content. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { materialTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('material', materialTheme); - * - * // Use the theme - * flasher.use('theme.material').success('Operation completed successfully'); - * ``` - */ export const materialTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a minimalist Material Design notification card with - * message content, dismiss button, and progress indicator. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' - // Material Design uses uppercase text for buttons const actionText = 'DISMISS' return ` diff --git a/src/Prime/Resources/assets/themes/minimal/index.ts b/src/Prime/Resources/assets/themes/minimal/index.ts index 53ca7160..d0a22a44 100644 --- a/src/Prime/Resources/assets/themes/minimal/index.ts +++ b/src/Prime/Resources/assets/themes/minimal/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Minimal Theme Registration - * @description Registers the Minimal theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { minimalTheme } from './minimal' -/** - * Register the Minimal theme. - * - * This theme provides an ultra-clean, distraction-free notification style - * that integrates smoothly into modern interfaces without drawing unnecessary attention. - * - * The registration makes the theme available under the name 'minimal'. - * - * The Minimal theme can be used by calling: - * ```typescript - * flasher.use('theme.minimal').success('Changes saved'); - * ``` - * - * Key features: - * - Translucent background with subtle blur - * - Compact design with minimal visual elements - * - Small colored dot instead of large icons - * - Thin progress indicator - * - Short, subtle entrance animation - */ flasher.addTheme('minimal', minimalTheme) diff --git a/src/Prime/Resources/assets/themes/minimal/minimal.scss b/src/Prime/Resources/assets/themes/minimal/minimal.scss index 73c79bb7..c7cb5073 100644 --- a/src/Prime/Resources/assets/themes/minimal/minimal.scss +++ b/src/Prime/Resources/assets/themes/minimal/minimal.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Minimal Theme Styles - * @description CSS styling for ultra-clean, distraction-free notifications - * @author Younes ENNAJI */ - -/** * PHPFlasher - Minimal Theme * * Ultra-clean and minimal notifications that stay out of the way. @@ -12,7 +6,6 @@ */ .fl-minimal { /* Theme variables - Define the visual appearance of Minimal notifications */ - /* Base colors and appearance */ --minimal-bg-light: rgba(255, 255, 255); /* Semi-transparent white in light mode */ --minimal-bg-dark: rgba(25, 25, 25); /* Semi-transparent dark in dark mode */ @@ -23,15 +16,12 @@ --minimal-border-radius: 4px; /* Modest border radius */ --minimal-border-color: rgba(0, 0, 0, 0.05); /* Nearly invisible border in light mode */ --minimal-border-color-dark: rgba(255, 255, 255, 0.1); /* Subtle border in dark mode */ - /* Type-specific colors - semi-transparent for subtlety */ --minimal-success: rgba(34, 197, 94, 0.9); /* Green with slight transparency */ --minimal-info: rgba(14, 165, 233, 0.9); /* Blue with slight transparency */ --minimal-warning: rgba(245, 158, 11, 0.9); /* Orange with slight transparency */ --minimal-error: rgba(239, 68, 68, 0.9); /* Red with slight transparency */ } - -/** * Entrance animation for Minimal theme * Quick, subtle slide-in from above */ @@ -45,8 +35,6 @@ transform: translateY(0); /* End at natural position */ } } - -/** * Base Minimal theme styling */ .fl-minimal { @@ -63,7 +51,6 @@ backdrop-filter: blur(8px); /* Frosted glass effect */ -webkit-backdrop-filter: blur(8px); /* Safari support */ border: 1px solid var(--minimal-border-color); /* Nearly invisible border */ - /** * Content container * Holds message and close button @@ -73,7 +60,6 @@ align-items: center; /* Vertically center content */ gap: 0.75rem; /* Space between elements */ } - /** * Small colored dot indicator * Used instead of large icons for minimal appearance @@ -84,7 +70,6 @@ border-radius: 50%; /* Perfectly circular */ flex-shrink: 0; /* Prevent dot from shrinking */ } - /** * Message styling * Main notification text @@ -96,7 +81,6 @@ flex: 1; /* Take available space */ margin: 0; } - /** * Close button styling * Simple, minimal close button @@ -116,12 +100,10 @@ height: 1.5rem; font-size: 1rem; /* 16px × symbol */ flex-shrink: 0; /* Prevent button from shrinking */ - &:hover, &:focus { opacity: 0.8; /* More visible on hover/focus, but still subtle */ } } - /** * Progress bar container * Holds the animated progress indicator @@ -135,7 +117,6 @@ overflow: hidden; border-radius: 0 0 var(--minimal-border-radius) var(--minimal-border-radius); /* Match parent corners */ opacity: 0.7; /* Slightly transparent */ - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -145,7 +126,6 @@ width: 100%; } } - /** * Type-specific styling * Each notification type gets its own color for the dot and progress bar @@ -154,34 +134,28 @@ .fl-dot { background-color: var(--minimal-success); } .fl-progress-bar .fl-progress { background-color: var(--minimal-success); } } - &.fl-info { .fl-dot { background-color: var(--minimal-info); } .fl-progress-bar .fl-progress { background-color: var(--minimal-info); } } - &.fl-warning { .fl-dot { background-color: var(--minimal-warning); } .fl-progress-bar .fl-progress { background-color: var(--minimal-warning); } } - &.fl-error { .fl-dot { background-color: var(--minimal-error); } .fl-progress-bar .fl-progress { background-color: var(--minimal-error); } } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-progress .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences @@ -190,8 +164,6 @@ animation: none; /* Disable animation */ } } - -/** * Dark mode support * Different styling when in dark mode */ diff --git a/src/Prime/Resources/assets/themes/minimal/minimal.ts b/src/Prime/Resources/assets/themes/minimal/minimal.ts index 7b69f9e8..8e372ec0 100644 --- a/src/Prime/Resources/assets/themes/minimal/minimal.ts +++ b/src/Prime/Resources/assets/themes/minimal/minimal.ts @@ -1,57 +1,10 @@ -/** - * @file PHPFlasher Minimal Theme Implementation - * @description Ultra-clean notification design that stays out of the way - * @author Younes ENNAJI - */ import './minimal.scss' import type { Envelope } from '../../types' -/** - * Minimal notification theme for PHPFlasher. - * - * The Minimal theme provides an ultra-clean, distraction-free design with: - * - Translucent background with subtle blur effect - * - Small dot indicator instead of large icons - * - Compact dimensions and comfortable spacing - * - Subtle entrance animation - * - Thin progress indicator - * - System font stack for maximum readability - * - * This theme is designed to be as unobtrusive as possible, perfect for - * applications where notifications should provide information without - * disrupting the user experience. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { minimalTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('minimal', minimalTheme); - * - * // Use the theme - * flasher.use('theme.minimal').success('Changes saved'); - * ``` - */ export const minimalTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a clean, minimal notification with just the essential elements: - * - Message text - * - Close button - * - Progress indicator - * - * The Minimal theme uses a color dot indicator instead of large icons, - * keeping the design compact and focused on the message content. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/neon/index.ts b/src/Prime/Resources/assets/themes/neon/index.ts index 34fdcb96..219a810d 100644 --- a/src/Prime/Resources/assets/themes/neon/index.ts +++ b/src/Prime/Resources/assets/themes/neon/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Neon Theme Registration - * @description Registers the Neon theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { neonTheme } from './neon' -/** - * Register the Neon theme. - * - * This theme provides elegant notifications with subtle glowing accents - * and a sophisticated visual style. - * - * The registration makes the theme available under the name 'neon'. - * - * The Neon theme can be used by calling: - * ```typescript - * flasher.use('theme.neon').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Subtle glowing accents based on notification type - * - Floating illuminated circular indicator - * - Frosted glass background with blur effect - * - Refined typography with Inter font - * - Smooth entrance animation with blur transition - */ flasher.addTheme('neon', neonTheme) diff --git a/src/Prime/Resources/assets/themes/neon/neon.scss b/src/Prime/Resources/assets/themes/neon/neon.scss index b036cc86..e3bf8ad9 100644 --- a/src/Prime/Resources/assets/themes/neon/neon.scss +++ b/src/Prime/Resources/assets/themes/neon/neon.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Neon Theme Styles - * @description CSS styling for elegant notifications with glowing accents - * @author Younes ENNAJI */ - -/** * PHPFlasher - Neon Theme * * Notifications with subtle glowing accents and elegant typography. @@ -12,7 +6,6 @@ */ .fl-neon { /* Theme variables - Define the visual appearance of Neon notifications */ - /* Base colors and appearance */ --neon-bg-light: rgba(255, 255, 255); /* Translucent white in light mode */ --neon-bg-dark: rgba(15, 23, 42); /* Translucent slate in dark mode */ @@ -21,19 +14,15 @@ --neon-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Soft, spread shadow */ --neon-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25); /* Deeper shadow for dark mode */ --neon-border-radius: 4px; /* Rounded corners */ - /* Glow colors for different notification types */ --neon-success: #10b981; /* Emerald green for success */ --neon-info: #3b82f6; /* Blue for info */ --neon-warning: #f59e0b; /* Amber for warning */ --neon-error: #ef4444; /* Red for error */ - /* Glow and animation properties */ --neon-glow-strength: 10px; /* How far the glow extends */ --neon-animation-duration: 0.35s; /* Duration for entrance animation */ } - -/** * Entrance animation for Neon theme * Combines movement, fade, and blur transitions */ @@ -49,8 +38,6 @@ filter: blur(0); /* End with clear focus */ } } - -/** * Pulsing glow animation for the indicator * Creates a gentle breathing effect for the glow */ @@ -62,8 +49,6 @@ filter: drop-shadow(0 0 calc(var(--neon-glow-strength) * 0.7) currentColor); /* Reduced glow */ } } - -/** * Base Neon theme styling */ .fl-neon { @@ -78,11 +63,9 @@ font-family: 'Inter', var(--fl-font), sans-serif; /* Prefer Inter font for elegant typography */ will-change: transform, opacity, filter; /* Optimize for animation performance */ overflow: hidden; /* Contain progress bar */ - /* Frosted glass effect */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); - /** * Floating illuminated indicator * Creates a glowing circle that appears to float above the notification @@ -98,7 +81,6 @@ align-items: center; justify-content: center; animation: neonGlow 3s ease-in-out infinite; /* Continuous gentle pulsing */ - /* Semi-transparent circular background */ &::before { content: ''; @@ -108,7 +90,6 @@ border-radius: 50%; opacity: 0.4; /* Subtle background */ } - /* Solid colored center dot */ &::after { content: ''; @@ -119,7 +100,6 @@ z-index: 1; /* Ensure dot appears above the glow */ } } - /** * Content container * Holds message and close button @@ -128,7 +108,6 @@ display: flex; align-items: center; /* Vertically center content */ } - /** * Message styling * Main notification text @@ -139,7 +118,6 @@ line-height: 1.5; /* Comfortable line height */ font-weight: 500; /* Medium weight for better readability */ } - /** * Close button styling * Circular button with hover effect @@ -161,13 +139,11 @@ transition: all 0.2s ease; /* Smooth hover transition */ font-size: 1.2rem; flex-shrink: 0; /* Prevent button from shrinking */ - &:hover, &:focus { opacity: 1; /* Full opacity on hover/focus */ background-color: rgba(0, 0, 0, 0.06); /* Subtle background on hover */ } } - /** * Progress bar container * Holds the animated progress indicator @@ -180,7 +156,6 @@ height: 3px; overflow: hidden; border-radius: 0 0 var(--neon-border-radius) var(--neon-border-radius); /* Match parent corners */ - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -190,7 +165,6 @@ width: 100%; } } - /** * Type-specific styling for each notification type * Each type gets its own color for the indicator and progress bar @@ -203,7 +177,6 @@ } .fl-progress { background-color: var(--neon-success); } /* Green progress bar */ } - &.fl-info { .fl-icon-box { color: var(--neon-info); /* Blue glow */ @@ -212,7 +185,6 @@ } .fl-progress { background-color: var(--neon-info); } /* Blue progress bar */ } - &.fl-warning { .fl-icon-box { color: var(--neon-warning); /* Amber glow */ @@ -221,7 +193,6 @@ } .fl-progress { background-color: var(--neon-warning); } /* Amber progress bar */ } - &.fl-error { .fl-icon-box { color: var(--neon-error); /* Red glow */ @@ -230,43 +201,35 @@ } .fl-progress { background-color: var(--neon-error); } /* Red progress bar */ } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-icon-box { left: auto; right: 16px; /* Move icon to right side */ } - .fl-close { margin-left: 0; margin-right: 16px; /* Swap margins */ } - .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences */ @media (prefers-reduced-motion: reduce) { animation: none; /* Disable entrance animation */ - .fl-icon-box { animation: none; /* Disable glow animation */ } } } - -/** * Dark mode support * Different styling when in dark mode */ @@ -276,7 +239,6 @@ html.fl-dark .fl-neon, background-color: var(--neon-bg-dark); /* Darker, semi-transparent background */ color: var(--neon-text-dark); /* Light text */ box-shadow: var(--neon-shadow-dark); /* Stronger shadow */ - /** * Adjust hover effect for dark mode * Use white instead of black with appropriate opacity diff --git a/src/Prime/Resources/assets/themes/neon/neon.ts b/src/Prime/Resources/assets/themes/neon/neon.ts index a2683a2a..2985e62a 100644 --- a/src/Prime/Resources/assets/themes/neon/neon.ts +++ b/src/Prime/Resources/assets/themes/neon/neon.ts @@ -1,51 +1,10 @@ -/** - * @file PHPFlasher Neon Theme Implementation - * @description Elegant notifications with subtle glowing accents - * @author Younes ENNAJI - */ import './neon.scss' import type { Envelope } from '../../types' -/** - * Neon notification theme for PHPFlasher. - * - * The Neon theme provides an elegant visual style with: - * - Subtle glowing accents based on notification type - * - Floating illuminated circular indicator - * - Frosted glass background with blur effect - * - Refined typography using Inter font - * - Smooth entrance animation with blur transition - * - Gentle pulsing glow effect on the indicator - * - * This theme creates a modern, sophisticated appearance with a touch - * of futuristic design through its subtle illumination effects. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { neonTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('neon', neonTheme); - * - * // Use the theme - * flasher.use('theme.neon').success('Your changes have been saved'); - * ``` - */ export const neonTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates an elegant notification with a glowing indicator, - * message content, close button, and progress bar. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/onyx/index.ts b/src/Prime/Resources/assets/themes/onyx/index.ts index 89a8ea75..310813c9 100644 --- a/src/Prime/Resources/assets/themes/onyx/index.ts +++ b/src/Prime/Resources/assets/themes/onyx/index.ts @@ -1,30 +1,4 @@ -/** - * @file PHPFlasher Onyx Theme Registration - * @description Registers the Onyx theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { onyxTheme } from './onyx' -/** - * Register the Onyx theme. - * - * This theme provides modern, floating notifications with subtle accent dots - * and a clean, sophisticated design. - * - * The registration makes the theme available under the name 'onyx'. - * - * The Onyx theme can be used by calling: - * ```typescript - * flasher.use('theme.onyx').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Clean, floating cards with elegant shadows - * - Colored accent dots in the corners - * - Generous rounded corners (1rem radius) - * - Smooth entrance animation with blur transition - * - Minimal design without icons - * - Type-specific colored accents and progress bar - */ flasher.addTheme('onyx', onyxTheme) diff --git a/src/Prime/Resources/assets/themes/onyx/onyx.scss b/src/Prime/Resources/assets/themes/onyx/onyx.scss index a632c510..b6078fc6 100644 --- a/src/Prime/Resources/assets/themes/onyx/onyx.scss +++ b/src/Prime/Resources/assets/themes/onyx/onyx.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Onyx Theme Styles - * @description CSS styling for modern floating notifications with subtle accents - * @author Younes ENNAJI */ - -/** * PHPFlasher - Onyx Theme * * Modern notification style with floating appearance and subtle accents. @@ -12,7 +6,6 @@ */ .fl-onyx { /* Theme variables - Define the visual appearance of Onyx notifications */ - /* Base colors and appearance */ --onyx-bg-light: #ffffff; /* Pure white background in light mode */ --onyx-bg-dark: #1e1e1e; /* Dark background in dark mode */ @@ -21,15 +14,12 @@ --onyx-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Soft, spread shadow */ --onyx-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25); /* Deeper shadow for dark mode */ --onyx-border-radius: 4px; /* Generous rounded corners */ - /* Type-specific colors for accent dots and progress bar */ --onyx-success: #10b981; /* Green for success */ --onyx-info: #3b82f6; /* Blue for info */ --onyx-warning: #f59e0b; /* Amber for warning */ --onyx-error: #ef4444; /* Red for error */ } - -/** * Entrance animation for Onyx theme * Combines upward movement, fade, and blur transitions */ @@ -45,8 +35,6 @@ filter: blur(0); /* End with clear focus */ } } - -/** * Base Onyx theme styling */ .fl-onyx { @@ -61,7 +49,6 @@ will-change: transform, opacity, filter; /* Optimize for animation performance */ border-radius: var(--onyx-border-radius) var(--onyx-border-radius) 0 0; /* Rounded corners */ overflow: hidden; /* Contain progress bar */ - /** * Accent dots at the corners * Small circular indicators of notification type @@ -74,19 +61,16 @@ border-radius: 50%; /* Perfectly circular */ z-index: 1; /* Ensure dots appear above content */ } - /* Top-left dot */ &::before { top: 10px; left: 10px; } - /* Bottom-right dot */ &::after { bottom: 10px; right: 10px; } - /** * Content container * Holds message and close button @@ -96,7 +80,6 @@ align-items: center; /* Vertically center content */ padding-left: 0.4rem; /* Space after the dot */ } - /** * Text container * Wraps the message @@ -105,7 +88,6 @@ flex: 1; /* Take available space */ position: relative; } - /** * Message styling * Main notification text @@ -116,7 +98,6 @@ font-weight: 400; /* Regular weight for clean appearance */ letter-spacing: 0.01rem; /* Slight letter spacing for readability */ } - /** * Close button styling * Circular button with hover effect @@ -138,13 +119,11 @@ justify-content: center; width: 1.75rem; /* 28px diameter */ height: 1.75rem; - &:hover, &:focus { opacity: 1; /* Full opacity on hover/focus */ background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */ } } - /** * Progress bar container * Holds the animated progress indicator @@ -156,7 +135,6 @@ bottom: 0; height: 3px; /* Thin progress bar */ overflow: hidden; - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -167,76 +145,61 @@ transform-origin: left center; /* Animation starts from left */ } } - /** * Type-specific styling for each notification type * Each type gets its own color for the dots and progress bar */ &.fl-success { &::before, &::after { background-color: var(--onyx-success); } /* Green dots */ - .fl-progress-bar .fl-progress { background-color: var(--onyx-success); /* Green progress bar */ } } - &.fl-info { &::before, &::after { background-color: var(--onyx-info); } /* Blue dots */ - .fl-progress-bar .fl-progress { background-color: var(--onyx-info); /* Blue progress bar */ } } - &.fl-warning { &::before, &::after { background-color: var(--onyx-warning); } /* Amber dots */ - .fl-progress-bar .fl-progress { background-color: var(--onyx-warning); /* Amber progress bar */ } } - &.fl-error { &::before, &::after { background-color: var(--onyx-error); } /* Red dots */ - .fl-progress-bar .fl-progress { background-color: var(--onyx-error); /* Red progress bar */ } } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-content { padding-left: 0; padding-right: 0.4rem; /* Swap padding for RTL */ } - .fl-close { margin-left: 0; margin-right: 1rem; /* Swap margins for RTL */ } - /* Swap dot positions for RTL */ &::before { left: auto; right: 10px; } - &::after { right: auto; left: 10px; } - .fl-progress .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences @@ -245,8 +208,6 @@ animation: none; /* Disable animation */ } } - -/** * Dark mode support * Different styling when in dark mode */ @@ -256,7 +217,6 @@ html.fl-dark .fl-onyx, background-color: var(--onyx-bg-dark); /* Dark background */ color: var(--onyx-text-dark); /* Light text */ box-shadow: var(--onyx-shadow-dark); /* Stronger shadow */ - /** * Adjust hover effect for dark mode * Use white instead of black with appropriate opacity diff --git a/src/Prime/Resources/assets/themes/onyx/onyx.ts b/src/Prime/Resources/assets/themes/onyx/onyx.ts index ee735317..3ebb8846 100644 --- a/src/Prime/Resources/assets/themes/onyx/onyx.ts +++ b/src/Prime/Resources/assets/themes/onyx/onyx.ts @@ -1,51 +1,10 @@ -/** - * @file PHPFlasher Onyx Theme Implementation - * @description Modern floating notifications with subtle accent elements - * @author Younes ENNAJI - */ import './onyx.scss' import type { Envelope } from '../../types' -/** - * Onyx notification theme for PHPFlasher. - * - * The Onyx theme provides a modern, refined visual style with: - * - Clean, floating cards with elegant shadows - * - Small accent dots in the corners indicating notification type - * - Generous rounded corners for a contemporary look - * - Smooth entrance animation with blur transition - * - No icons, maintaining a minimal, focused design - * - Subtle progress indicator at the bottom - * - * This theme creates a sophisticated appearance that integrates - * well with modern interfaces while providing clear status information. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { onyxTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('onyx', onyxTheme); - * - * // Use the theme - * flasher.use('theme.onyx').success('Your changes have been saved'); - * ``` - */ export const onyxTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a clean, modern notification with message content, - * close button, and progress bar. The accent dots are added via CSS. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/progress.scss b/src/Prime/Resources/assets/themes/progress.scss index c400b9a1..f70a7d08 100644 --- a/src/Prime/Resources/assets/themes/progress.scss +++ b/src/Prime/Resources/assets/themes/progress.scss @@ -1,15 +1,3 @@ -/** - * @file PHPFlasher Progress Bar Styles - * @description Styling for notification progress bars - * @author Younes ENNAJI - */ - -/** - * .fl-progress-bar - * - * Container for the progress indicator that shows remaining time. - * This styles the progress bar container across all notification types. - */ .fl-progress-bar { display: flex; height: 0.125em; @@ -20,20 +8,10 @@ overflow: hidden; } -/** - * Type-specific progress bar styling - * Ensures progress bars match the notification type color scheme - */ @each $type in success, info, warning, error { .fl-#{$type} .fl-progress-bar { background-color: var(--#{$type}-color-light, var(--fl-#{$type}-light)); - /** - * .fl-progress - * - * The actual progress indicator that animates as time passes. - * Width is controlled by JavaScript. - */ .fl-progress { background-color: var(--#{$type}-color, var(--fl-#{$type})); width: 100%; @@ -44,10 +22,6 @@ } } -/** - * RTL support for progress bars - * Ensures animation works correctly in right-to-left layouts - */ .fl-rtl .fl-progress .fl-progress { transform-origin: right center; } diff --git a/src/Prime/Resources/assets/themes/ruby/index.ts b/src/Prime/Resources/assets/themes/ruby/index.ts index 11479bbb..26d10a71 100644 --- a/src/Prime/Resources/assets/themes/ruby/index.ts +++ b/src/Prime/Resources/assets/themes/ruby/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Ruby Theme Registration - * @description Registers the Ruby theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { rubyTheme } from './ruby' -/** - * Register the Ruby theme. - * - * This theme provides vibrant notifications with gradient backgrounds, - * gemstone-like shine effects, and elegant animations. - * - * The registration makes the theme available under the name 'ruby'. - * - * The Ruby theme can be used by calling: - * ```typescript - * flasher.use('theme.ruby').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Rich gradient backgrounds for each notification type - * - Elegant shine animation creating a gemstone-like effect - * - Circular icon container with translucent background - * - Smooth scale animation for entrance - * - Improved hover effects on close button - */ flasher.addTheme('ruby', rubyTheme) diff --git a/src/Prime/Resources/assets/themes/ruby/ruby.scss b/src/Prime/Resources/assets/themes/ruby/ruby.scss index 8c1cd722..ff120013 100644 --- a/src/Prime/Resources/assets/themes/ruby/ruby.scss +++ b/src/Prime/Resources/assets/themes/ruby/ruby.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Ruby Theme Styles - * @description CSS styling for vibrant gradient notifications with gemstone effects - * @author Younes ENNAJI */ - -/** * PHPFlasher - Ruby Theme * * Vibrant notification style with gradient backgrounds and gemstone effects. @@ -12,21 +6,17 @@ */ .fl-ruby { /* Theme variables - Define the visual appearance of Ruby notifications */ - /* Base colors and appearance */ --ruby-text: #ffffff; /* White text for good contrast on gradients */ --ruby-text-dark: #f8fafc; /* Slightly off-white text for dark mode */ --ruby-border-radius: 4px; /* Rounded corners (18px) */ --ruby-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */ - /* Type-specific gradients - rich, vibrant color combinations */ --ruby-success-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%); /* Green gradient */ --ruby-info-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); /* Blue gradient */ --ruby-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); /* Amber gradient */ --ruby-error-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); /* Red gradient */ } - -/** * Shine animation for Ruby theme * Creates a moving highlight effect like light reflecting off a gemstone */ @@ -44,8 +34,6 @@ opacity: 0; /* Fade out at the end */ } } - -/** * Entrance animation for Ruby theme * Smooth scale-in effect */ @@ -59,8 +47,6 @@ transform: scale(1); /* End at normal size */ } } - -/** * Base Ruby theme styling */ .fl-ruby { @@ -74,7 +60,6 @@ font-family: var(--fl-font), serif; will-change: transform, opacity; /* Optimize for animation performance */ overflow: hidden; /* Contain the shine effect and progress bar */ - /** * Shine effect overlay * Creates the gemstone-like reflecting light animation @@ -96,7 +81,6 @@ animation-delay: 1s; /* Delay before first shine */ z-index: 1; /* Above the background, below content */ } - /** * Content container * Holds icon, message and close button @@ -108,7 +92,6 @@ position: relative; z-index: 2; /* Ensure content is above shine effect */ } - /** * Circular icon container * Translucent white circle holding the icon @@ -124,7 +107,6 @@ align-items: center; justify-content: center; } - /** * Icon styling * Icon within the circular container @@ -135,7 +117,6 @@ color: var(--ruby-text); /* White icon */ background-color: transparent; } - /** * Text container * Holds the message @@ -143,7 +124,6 @@ .fl-text { flex: 1; /* Take available space */ } - /** * Message styling * Main notification text @@ -153,7 +133,6 @@ line-height: 1.5; /* Comfortable line height */ font-weight: 500; /* Medium weight for better readability on colored backgrounds */ } - /** * Close button styling * Circular button with hover effect @@ -175,14 +154,12 @@ display: flex; align-items: center; justify-content: center; - &:hover, &:focus { opacity: 1; /* Full opacity on hover/focus */ background: rgba(255, 255, 255, 0.3); /* Lighter background on hover */ transform: scale(1.05); /* Subtle grow effect on hover */ } } - /** * Progress bar container * Holds the animated progress indicator @@ -196,7 +173,6 @@ background-color: rgba(0, 0, 0, 0.1); /* Slightly dark background */ overflow: hidden; z-index: 3; /* Above other elements */ - /** * Progress indicator * Animated by JavaScript to show remaining time @@ -207,7 +183,6 @@ background: rgba(255, 255, 255, 0.4); /* Translucent white progress */ } } - /** * Type-specific styling * Each notification type gets its own gradient background @@ -215,52 +190,42 @@ &.fl-success { background: var(--ruby-success-gradient); /* Green gradient */ } - &.fl-info { background: var(--ruby-info-gradient); /* Blue gradient */ } - &.fl-warning { background: var(--ruby-warning-gradient); /* Amber gradient */ } - &.fl-error { background: var(--ruby-error-gradient); /* Red gradient */ } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; - .fl-icon-circle { margin-right: 0; margin-left: 1rem; /* Swap margins for RTL */ } - .fl-close { margin-left: 0; margin-right: 0.75rem; /* Swap margins for RTL */ } - .fl-shine { transform: skewX(20deg); /* Reverse shine angle for RTL */ } - .fl-progress .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences */ @media (prefers-reduced-motion: reduce) { animation: none; /* Disable entrance animation */ - .fl-shine { display: none; /* Remove shine effect for reduced motion */ } diff --git a/src/Prime/Resources/assets/themes/ruby/ruby.ts b/src/Prime/Resources/assets/themes/ruby/ruby.ts index d0fa14ee..e7910250 100644 --- a/src/Prime/Resources/assets/themes/ruby/ruby.ts +++ b/src/Prime/Resources/assets/themes/ruby/ruby.ts @@ -1,51 +1,10 @@ -/** - * @file PHPFlasher Ruby Theme Implementation - * @description Vibrant notifications with gradient backgrounds and gemstone effects - * @author Younes ENNAJI - */ import './ruby.scss' import type { Envelope } from '../../types' -/** - * Ruby notification theme for PHPFlasher. - * - * The Ruby theme provides a vibrant, colorful style with: - * - Rich gradient backgrounds for each notification type - * - Elegant shine animation reminiscent of light reflecting off gemstones - * - Circular icon container with translucent background - * - Clean typography with good contrast on colored backgrounds - * - Smooth scale animation for entrance - * - Semi-transparent progress indicator - * - * This theme creates an eye-catching appearance that draws attention - * while maintaining excellent readability and a premium feel. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { rubyTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('ruby', rubyTheme); - * - * // Use the theme - * flasher.use('theme.ruby').success('Your changes have been saved'); - * ``` - */ export const rubyTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a vibrant, gradient notification with shine effect, - * circular icon container, message content, close button, and progress bar. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/sapphire/index.ts b/src/Prime/Resources/assets/themes/sapphire/index.ts index 39784c73..83359c6c 100644 --- a/src/Prime/Resources/assets/themes/sapphire/index.ts +++ b/src/Prime/Resources/assets/themes/sapphire/index.ts @@ -1,29 +1,4 @@ -/** - * @file PHPFlasher Sapphire Theme Registration - * @description Registers the Sapphire theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { sapphireTheme } from './sapphire' -/** - * Register the Sapphire theme. - * - * This theme provides modern, glassmorphic notifications with blurred - * backdrop effect and a clean, minimal design. - * - * The registration makes the theme available under the name 'sapphire'. - * - * The Sapphire theme can be used by calling: - * ```typescript - * flasher.use('theme.sapphire').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Glassmorphic design with backdrop blur effect - * - Minimal interface without icons or close buttons - * - Type-specific colored backgrounds with high transparency - * - Subtle entrance animation with a slight bounce - * - Clean progress indicator at the bottom - */ flasher.addTheme('sapphire', sapphireTheme) diff --git a/src/Prime/Resources/assets/themes/sapphire/sapphire.scss b/src/Prime/Resources/assets/themes/sapphire/sapphire.scss index 959484e0..ef3403ac 100644 --- a/src/Prime/Resources/assets/themes/sapphire/sapphire.scss +++ b/src/Prime/Resources/assets/themes/sapphire/sapphire.scss @@ -1,38 +1,26 @@ -/** - * @file PHPFlasher Sapphire Theme Styles - * @description CSS styling for modern glassmorphic notifications - * @author Younes ENNAJI */ - -/** * PHPFlasher - Sapphire Theme * * Modern glassmorphic notifications with blurred backdrop effect. * Features clean, minimal design and subtle animations. */ - /* Theme-specific variables - override these to customize the sapphire theme */ .fl-sapphire { /* Base appearance */ --sapphire-bg-base: rgba(30, 30, 30, 0.9); /* Dark semi-transparent background */ --sapphire-text: #f0f0f0; /* Light text for contrast */ --sapphire-shadow: rgba(0, 0, 0, 0.15); /* Subtle shadow */ - /* Progress bar colors */ --sapphire-progress-bg: rgba(255, 255, 255, 0.2); /* Light translucent background */ --sapphire-progress-fill: rgba(255, 255, 255, 0.9); /* Nearly white progress indicator */ - /* Notification type colors - all with high transparency */ --sapphire-success: rgba(16, 185, 129, 0.95); /* Transparent green */ --sapphire-error: rgba(239, 68, 68, 0.95); /* Transparent red */ --sapphire-warning: rgba(245, 158, 11, 0.95); /* Transparent amber */ --sapphire-info: rgba(59, 130, 246, 0.95); /* Transparent blue */ - /* Animation timing */ --sapphire-animation: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth bounce easing */ } - -/** * Entrance animation keyframes * Includes a subtle bounce effect for a more dynamic appearance */ @@ -49,8 +37,6 @@ transform: translateY(0); /* End at natural position */ } } - -/** * Main theme styling */ .fl-sapphire { @@ -66,14 +52,12 @@ font-family: Roboto, var(--fl-font), serif; /* Prefer Roboto font */ border-radius: 4px 4px 0 0; /* Rounded corners */ will-change: transform, opacity; /* Optimize for animation performance */ - /** * Glassmorphism effect * Creates the frosted glass appearance */ backdrop-filter: blur(12px); /* Strong blur effect */ -webkit-backdrop-filter: blur(12px); /* Safari support */ - /** * Message styling * Clean, readable text @@ -83,7 +67,6 @@ line-height: 1.4; /* Comfortable line height */ color: var(--sapphire-text); /* Consistent text color */ } - /** * Progress bar styling * Indicates time remaining before dismissal @@ -97,7 +80,6 @@ background-color: var(--sapphire-progress-bg); /* Semi-transparent background */ overflow: hidden; border-radius: 0 0 0.375em 0.375em; /* Rounded bottom corners */ - /** * Progress indicator * The actual moving part of the progress bar @@ -110,7 +92,6 @@ will-change: transform; /* Optimize animation performance */ } } - /** * Type-specific colors * Each notification type gets its own semi-transparent background @@ -118,31 +99,25 @@ &.fl-success { background-color: var(--sapphire-success); /* Green background */ } - &.fl-error { background-color: var(--sapphire-error); /* Red background */ } - &.fl-warning { background-color: var(--sapphire-warning); /* Amber background */ } - &.fl-info { background-color: var(--sapphire-info); /* Blue background */ } - /** * RTL language support * Right-to-left text direction */ &.fl-rtl { direction: rtl; /* Right-to-left text */ - .fl-progress .fl-progress { transform-origin: right center; /* Animation starts from right */ } } - /** * Accessibility * Respects reduced motion preferences diff --git a/src/Prime/Resources/assets/themes/sapphire/sapphire.ts b/src/Prime/Resources/assets/themes/sapphire/sapphire.ts index 470df5ff..98fbb765 100644 --- a/src/Prime/Resources/assets/themes/sapphire/sapphire.ts +++ b/src/Prime/Resources/assets/themes/sapphire/sapphire.ts @@ -1,51 +1,10 @@ -/** - * @file PHPFlasher Sapphire Theme Implementation - * @description Modern glassmorphic notifications with blurred backdrop effect - * @author Younes ENNAJI - */ import './sapphire.scss' import type { Envelope } from '../../types' -/** - * Sapphire notification theme for PHPFlasher. - * - * The Sapphire theme provides a modern, glassmorphic visual style with: - * - Semi-transparent backgrounds with backdrop blur effect - * - Clean, minimalist design without icons or close buttons - * - Subtle bounce animation for entrance - * - Type-specific colored backgrounds with high transparency - * - Elegant progress indicator at the bottom - * - * This theme emphasizes simplicity and modern design trends, creating - * a sophisticated appearance that integrates well with contemporary interfaces. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { sapphireTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('sapphire', sapphireTheme); - * - * // Use the theme - * flasher.use('theme.sapphire').success('Your changes have been saved'); - * ``` - */ export const sapphireTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a clean, minimal notification with just the message content - * and progress bar. Unlike most themes, the Sapphire theme intentionally - * omits a close button and icons for a more streamlined appearance. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' diff --git a/src/Prime/Resources/assets/themes/slack/index.ts b/src/Prime/Resources/assets/themes/slack/index.ts index b3395896..a12f40a0 100644 --- a/src/Prime/Resources/assets/themes/slack/index.ts +++ b/src/Prime/Resources/assets/themes/slack/index.ts @@ -1,28 +1,4 @@ -/** - * @file PHPFlasher Slack Theme Registration - * @description Registers the Slack theme with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '../../index' import { slackTheme } from './slack' -/** - * Register the Slack theme. - * - * This theme provides notifications styled after Slack's familiar messaging interface. - * The registration makes the theme available under the name 'slack'. - * - * The Slack theme can be used by calling: - * ```typescript - * flasher.use('theme.slack').success('Your changes have been saved'); - * ``` - * - * Key features: - * - Message bubbles with subtle borders and shadows - * - Colored avatar icons indicating notification type - * - Clean typography matching Slack's text style - * - Hover effects that reveal action buttons - * - Dark mode support matching Slack's dark theme - * - RTL language support - */ flasher.addTheme('slack', slackTheme) diff --git a/src/Prime/Resources/assets/themes/slack/slack.scss b/src/Prime/Resources/assets/themes/slack/slack.scss index f1028ae6..c2749c86 100644 --- a/src/Prime/Resources/assets/themes/slack/slack.scss +++ b/src/Prime/Resources/assets/themes/slack/slack.scss @@ -1,10 +1,4 @@ -/** - * @file PHPFlasher Slack Theme Styles - * @description CSS styling for Slack-inspired notifications - * @author Younes ENNAJI */ - -/** * PHPFlasher - Slack Theme * * Familiar notifications inspired by Slack's popular messaging platform. @@ -12,7 +6,6 @@ */ .fl-slack { /* Theme variables - Define the visual appearance of Slack notifications */ - /* Base colors and appearance */ --slack-bg-light: #ffffff; /* White background in light mode */ --slack-bg-dark: #1a1d21; /* Dark background in dark mode (Slack dark) */ @@ -27,18 +20,14 @@ --slack-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); /* Subtle shadow in light mode */ --slack-shadow-dark: 0 1px 0 rgba(0, 0, 0, 0.2); /* Stronger shadow in dark mode */ --slack-avatar-size: 36px; /* Size of avatar/icon container */ - /* Type-specific colors matching Slack's color scheme */ --slack-success: #2bac76; /* Green */ --slack-info: #1264a3; /* Blue */ --slack-warning: #e8912d; /* Orange */ --slack-error: #e01e5a; /* Red/Pink */ - /* Animation timing */ --slack-animation-duration: 150ms; /* Quick animation for responsive feel */ } - -/** * Simple fade in animation * Quick and subtle to match Slack's responsive feel */ @@ -50,8 +39,6 @@ opacity: 1; /* End fully visible */ } } - -/** * Base Slack theme styling */ .fl-slack { @@ -59,7 +46,6 @@ margin: 4px 0; /* Minimal spacing between messages */ font-family: "Lato", "Slack-Lato", "Helvetica Neue", "Helvetica", sans-serif; /* Slack's font stack */ animation: slackFadeIn var(--slack-animation-duration) ease-out; /* Quick fade in */ - /** * Message bubble * The main container that resembles a Slack message @@ -74,12 +60,10 @@ transition: background-color 0.1s ease; /* Smooth hover transition */ border: 1px solid var(--slack-border-light); /* Subtle border */ box-shadow: var(--slack-shadow); /* Slight shadow for depth */ - &:hover { background-color: var(--slack-hover-light); /* Background change on hover */ } } - /** * Avatar container * Colored square that holds the type icon @@ -95,7 +79,6 @@ justify-content: center; background-color: currentColor; /* Uses the type color */ } - /** * Type icon * Symbol within the colored avatar @@ -105,7 +88,6 @@ font-weight: bold; /* Bold symbol */ font-size: 16px; /* Icon size */ } - /** * Message content container * Holds the message text @@ -114,7 +96,6 @@ flex: 1; /* Take available space */ min-width: 0; /* Allows text to wrap */ } - /** * Message text styling * Follows Slack's text appearance @@ -124,7 +105,6 @@ line-height: 1.46668; /* Slack's line height */ word-break: break-word; /* Allows breaking long words */ } - /** * Actions container * Holds the close button that appears on hover @@ -137,7 +117,6 @@ opacity: 0; /* Transparent by default */ transition: opacity 0.1s ease; /* Smooth fade in/out */ } - /** * Show actions on hover * Makes the close button appear when hovering the message @@ -146,7 +125,6 @@ visibility: visible; /* Show on hover */ opacity: 1; /* Fade in */ } - /** * Close button styling * Simple button with hover effect @@ -161,13 +139,11 @@ display: flex; align-items: center; justify-content: center; - &:hover { color: var(--slack-text-light); /* Darker on hover */ background-color: var(--slack-hover-light); /* Light background on hover */ } } - /** * Type-specific styling * Each notification type gets its own colored avatar @@ -177,52 +153,43 @@ color: var(--slack-success); /* Green avatar */ } } - &.fl-info { .fl-avatar { color: var(--slack-info); /* Blue avatar */ } } - &.fl-warning { .fl-avatar { color: var(--slack-warning); /* Orange avatar */ } } - &.fl-error { .fl-avatar { color: var(--slack-error); /* Red avatar */ } } - /** * RTL Support * Right-to-left language direction support */ &.fl-rtl { direction: rtl; /* Right-to-left text */ - .fl-avatar { margin-right: 0; margin-left: 8px; /* Swap margins */ } - .fl-username { margin-right: 0; margin-left: 4px; /* Swap margins */ } - .fl-actions { right: auto; left: 6px; /* Move to top-left */ } - .fl-slack-message { padding: 8px 8px 8px 20px; /* Swap padding */ } } - /** * Accessibility * Respects reduced motion preferences @@ -231,8 +198,6 @@ animation: none; /* Disable animation */ } } - -/** * Dark mode support * Slack-like dark theme */ @@ -244,15 +209,12 @@ html.fl-dark .fl-slack, color: var(--slack-text-dark); /* Light text */ border-color: var(--slack-border-dark); /* Darker border */ box-shadow: var(--slack-shadow-dark); /* Stronger shadow */ - &:hover { background-color: var(--slack-hover-dark); /* Dark hover state */ } } - .fl-close { color: var(--slack-text-secondary-dark); /* Lighter gray icon */ - &:hover { color: var(--slack-text-dark); /* White on hover */ background-color: var(--slack-hover-dark); /* Dark background on hover */ diff --git a/src/Prime/Resources/assets/themes/slack/slack.ts b/src/Prime/Resources/assets/themes/slack/slack.ts index c8c66179..67ec11de 100644 --- a/src/Prime/Resources/assets/themes/slack/slack.ts +++ b/src/Prime/Resources/assets/themes/slack/slack.ts @@ -1,60 +1,14 @@ -/** - * @file PHPFlasher Slack Theme Implementation - * @description Notifications styled after Slack's messaging interface - * @author Younes ENNAJI - */ import './slack.scss' import type { Envelope } from '../../types' -/** - * Slack notification theme for PHPFlasher. - * - * The Slack theme replicates the familiar messaging interface from Slack with: - * - Message bubbles with subtle borders and shadows - * - Avatar-like colored icons indicating notification type - * - Clean typography matching Slack's text style - * - Hover effects that reveal action buttons - * - Simple, fast animations for a responsive feel - * - * This theme creates a familiar experience for users accustomed to Slack's - * widely-used interface, providing a sense of comfort and familiarity. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import { slackTheme } from '@flasher/flasher/themes'; - * - * // Register the theme (if not already registered) - * flasher.addTheme('slack', slackTheme); - * - * // Use the theme - * flasher.use('theme.slack').success('Your changes have been saved'); - * ``` - */ export const slackTheme = { - /** - * Renders a notification envelope as HTML. - * - * Creates a Slack-styled message bubble with colored avatar icon, - * message text, and a close button that appears on hover. - * - * @param envelope - The notification envelope to render - * @returns HTML string representation of the notification - */ render: (envelope: Envelope): string => { const { type, message } = envelope - // Set appropriate ARIA roles based on notification type const isAlert = type === 'error' || type === 'warning' const role = isAlert ? 'alert' : 'status' const ariaLive = isAlert ? 'assertive' : 'polite' - /** - * Gets the appropriate type icon based on notification type. - * Each type has a simple symbol within a colored background. - * - * @returns HTML markup for the type icon - */ const getTypeIcon = () => { switch (type) { case 'success': diff --git a/src/Prime/Resources/assets/themes/wrapper.scss b/src/Prime/Resources/assets/themes/wrapper.scss index a0a61ee5..27ba2ebe 100644 --- a/src/Prime/Resources/assets/themes/wrapper.scss +++ b/src/Prime/Resources/assets/themes/wrapper.scss @@ -1,15 +1,3 @@ -/** - * @file PHPFlasher Wrapper Styles - * @description Positioning and layout for notification containers - * @author Younes ENNAJI - */ - -/** - * .fl-wrapper - * - * The main container that holds notifications. - * Controls position, stacking, and transition effects. - */ .fl-wrapper { position: fixed; z-index: 1000; @@ -17,12 +5,8 @@ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; - /** - * Child notification containers - * Each notification inherits positioning from its wrapper - */ .fl-container { - pointer-events: auto; // Allow interactions with the notification + pointer-events: auto; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; @@ -34,14 +18,10 @@ } } - /** - * Stacking behavior for multiple notifications - */ &.fl-stacked .fl-container:not(:last-child) { margin-bottom: 0.5em; } - // Position variations - vertical positioning &[data-position^="top-"] { top: 0.75em; } @@ -54,7 +34,6 @@ top: 50%; } - // Position variations - horizontal positioning &[data-position$="-right"] { right: 0.75em; } @@ -67,10 +46,6 @@ left: 50%; } - /** - * Complex positioning behaviors for different positions - */ - // Compound transforms for center row &[data-position="center-left"] { transform: translateY(-50%); @@ -91,16 +66,13 @@ transform: translate(-50%, -50%); .fl-container { - // Different initial state for center-center to avoid conflicts transform: translate(0, 0) scale(0.5); opacity: 0; - // Slightly longer transition for center-center transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); } } - // Standard positioning transforms &[data-position="top-center"], &[data-position="bottom-center"] { transform: translateX(-50%); @@ -124,10 +96,6 @@ transform: translateX(-110%); } - /** - * Responsive adjustments - * Ensure notifications display well on all screen sizes - */ @media screen and (max-width: 768px) { width: 85%; left: 7.5%; @@ -140,7 +108,6 @@ right: auto; } - // Keep vertical transforms but normalize horizontal ones &[data-position^="top-"] { transform: translateX(-50%); top: 0.75em; @@ -163,9 +130,6 @@ right: 5%; } - /** - * Dark mode support - */ @media (prefers-color-scheme: dark) { &.fl-auto-dark .fl-container { box-shadow: var(--fl-shadow-dark, 0 4px 12px rgba(0, 0, 0, 0.35)); @@ -173,10 +137,6 @@ } } -/** - * Dismissal animations - * Control how notifications animate out when closed - */ .fl-wrapper .fl-container.fl-dismissing { opacity: 0; transition: all 0.3s ease-out; @@ -197,7 +157,6 @@ &[data-position="center-center"] { transform: scale(0.5); - // Slightly longer dismiss time for center-center transition: opacity 0.4s ease-out, transform 0.4s ease-out; } @@ -214,10 +173,6 @@ } } -/** - * Accessibility support - * Respect reduced motion preferences - */ @media (prefers-reduced-motion: reduce) { .fl-wrapper, .fl-wrapper .fl-container { diff --git a/src/SweetAlert/Prime/Resources/assets/index.ts b/src/SweetAlert/Prime/Resources/assets/index.ts index f0521d29..bf5b0b72 100644 --- a/src/SweetAlert/Prime/Resources/assets/index.ts +++ b/src/SweetAlert/Prime/Resources/assets/index.ts @@ -1,55 +1,7 @@ -/** - * @file SweetAlert Plugin Entry Point - * @description Registers the SweetAlert plugin with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '@flasher/flasher' import SweetAlertPlugin from './sweetalert' -/** - * Create and register the SweetAlert plugin with PHPFlasher. - * - * This enables using SweetAlert for displaying notifications through - * the PHPFlasher API. - * - * @example - * ```typescript - * // With the plugin already registered - * import flasher from '@flasher/flasher'; - * - * // Basic success message - * flasher.use('sweetalert').success('Operation completed'); - * - * // Confirmation dialog - * flasher.use('sweetalert').warning('Are you sure?', 'Confirmation', { - * showCancelButton: true, - * confirmButtonText: 'Yes, delete it!', - * cancelButtonText: 'Cancel' - * }); - * - * // Listen for user interaction results - * window.addEventListener('flasher:sweetalert:promise', (event) => { - * const { promise, envelope } = event.detail; - * if (promise.isConfirmed) { - * // User clicked confirm button - * console.log('User confirmed', envelope); - * } - * }); - * ``` - */ const sweetalert = new SweetAlertPlugin() flasher.addPlugin('sweetalert', sweetalert) -/** - * Export the SweetAlert plugin instance. - * - * This allows direct access to the plugin if needed. - * - * @example - * ```typescript - * import sweetalert from '@flasher/flasher-sweetalert'; - * - * sweetalert.success('Operation completed'); - * ``` - */ export default sweetalert diff --git a/src/Toastr/Prime/Resources/assets/index.ts b/src/Toastr/Prime/Resources/assets/index.ts index 292650b2..82ec299b 100644 --- a/src/Toastr/Prime/Resources/assets/index.ts +++ b/src/Toastr/Prime/Resources/assets/index.ts @@ -1,42 +1,7 @@ -/** - * @file Toastr Plugin Entry Point - * @description Registers the Toastr plugin with PHPFlasher - * @author Younes ENNAJI - */ import flasher from '@flasher/flasher' import ToastrPlugin from './toastr' -/** - * Create and register the Toastr plugin with PHPFlasher. - * - * This enables using Toastr for displaying notifications through - * the PHPFlasher API. - * - * @example - * ```typescript - * // With the plugin already registered - * import flasher from '@flasher/flasher'; - * - * // Basic usage - * flasher.use('toastr').success('Operation completed'); - * - * // With a title - * flasher.use('toastr').error('Connection failed', 'Error'); - * ``` - */ const toastrPlugin = new ToastrPlugin() flasher.addPlugin('toastr', toastrPlugin) -/** - * Export the Toastr plugin instance. - * - * This allows direct access to the plugin if needed. - * - * @example - * ```typescript - * import toastr from '@flasher/flasher-toastr'; - * - * toastr.success('Operation completed'); - * ``` - */ export default toastrPlugin diff --git a/src/Toastr/Prime/Resources/assets/toastr.ts b/src/Toastr/Prime/Resources/assets/toastr.ts index ca37f996..25225126 100644 --- a/src/Toastr/Prime/Resources/assets/toastr.ts +++ b/src/Toastr/Prime/Resources/assets/toastr.ts @@ -1,49 +1,14 @@ -/** - * @file Toastr Plugin Implementation - * @description PHPFlasher integration with the Toastr notification library - * @author Younes ENNAJI - */ import { AbstractPlugin } from '@flasher/flasher/dist/plugin' import type { Envelope, Options } from '@flasher/flasher/dist/types' import toastr from 'toastr' -/** - * Plugin implementation for Toastr notification library. - * - * The ToastrPlugin integrates the popular Toastr library with PHPFlasher, - * allowing for customizable toast notifications in various positions. - * - * This plugin requires jQuery and Toastr to be loaded in the page. These - * dependencies are automatically loaded by the PHP plugin's getScripts method. - * - * @example - * ```typescript - * import flasher from '@flasher/flasher'; - * import ToastrPlugin from '@flasher/flasher-toastr'; - * - * // Register the plugin - * flasher.addPlugin('toastr', new ToastrPlugin()); - * - * // Show a notification - * flasher.use('toastr').success('Operation completed'); - * ``` - */ export default class ToastrPlugin extends AbstractPlugin { - /** - * Creates Toastr notifications from envelopes. - * - * This method transforms PHPFlasher envelopes into Toastr notifications - * and displays them using the Toastr library. - * - * @param envelopes - Array of notification envelopes to render - */ public renderEnvelopes(envelopes: Envelope[]): void { if (!envelopes?.length) { return } - // Check for dependencies if (!this.isDependencyAvailable()) { return } @@ -52,10 +17,8 @@ export default class ToastrPlugin extends AbstractPlugin { try { const { message, title, type, options } = envelope - // Display the toast notification const instance = toastr[type as ToastrType](message, title, options as ToastrOptions) - // Handle Turbo/Hotwire compatibility if (instance && instance.parent) { try { const parent = instance.parent() @@ -72,25 +35,15 @@ export default class ToastrPlugin extends AbstractPlugin { }) } - /** - * Apply global options to Toastr. - * - * This method configures the Toastr library with the provided options, - * which will affect all subsequently created notifications. - * - * @param options - Configuration options for Toastr - */ public renderOptions(options: Options): void { - // Check for dependencies if (!this.isDependencyAvailable()) { return } try { - // Apply default options and merge with provided options toastr.options = { - timeOut: (options.timeOut || 10000) as number, // Default 10 seconds - progressBar: (options.progressBar || true) as boolean, // Show progress bar by default + timeOut: (options.timeOut || 10000) as number, + progressBar: (options.progressBar || true) as boolean, ...options, } as ToastrOptions } catch (error) { @@ -98,14 +51,7 @@ export default class ToastrPlugin extends AbstractPlugin { } } - /** - * Check if jQuery and Toastr dependencies are available - * - * @returns True if dependencies are available - * @private - */ private isDependencyAvailable(): boolean { - // Check for jQuery (handle both window.jQuery and window.$ usage) const jQuery = window.jQuery || window.$ if (!jQuery) {