mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
e417105f7a
This refactoring improves code quality and reduces duplication: ## New Files - `themes/shared/icons.ts` - Centralized SVG icons (getIcon, getCloseIcon) - `themes/shared/accessibility.ts` - A11y helpers (getA11yString, getCloseButtonA11y) - `themes/shared/constants.ts` - Standard class names and default titles ## Design Tokens Added (index.scss) - Spacing scale: --fl-spacing-xs through --fl-spacing-2xl - Typography scale: --fl-font-size-xs through --fl-font-size-xl - Close button sizes: --fl-close-sm, --fl-close-md, --fl-close-lg - Border radius: --fl-radius-sm through --fl-radius-full - Shadow tokens: --fl-shadow-sm through --fl-shadow-lg - Animation: --fl-duration-*, --fl-easing-*, --fl-slide-* ## Mixins Updated - Added `close-button-sized($size)` with sm/md/lg support - Added `close-button-circular($size)` variant - Added `close-button-text` for text-style buttons - Updated existing mixins to use design tokens ## All 17 Themes Refactored Each theme now uses shared utilities instead of duplicating code: - Icon code: 20+ lines → 1 function call - Accessibility: 3 lines → 1 function call - Class names: via CLASS_NAMES constants Backwards compatible - no breaking changes.
2 lines
1.4 KiB
JavaScript
2 lines
1.4 KiB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",i="fl-message",s="fl-actions",a="fl-close",t="fl-progress-bar",r="fl-progress",l=e=>`fl-${e}`,o=e=>`fl-${e}`,f="DISMISS",c={render:e=>{const{type:c,message:d}=e;return`\n <div class="${o("material")} ${l(c)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(c)}>\n <div class="fl-md-card">\n <div class="${n}">\n <div class="fl-text-content">\n <div class="${i}">${d}</div>\n </div>\n </div>\n <div class="${s}">\n <button class="fl-action-button ${a}" ${function(e){return`aria-label="Close ${e} message"`}(c)}>\n ${f}\n </button>\n </div>\n </div>\n <div class="${t}">\n <div class="${r}"></div>\n </div>\n </div>`}};e.addTheme("material",c)}));
|