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.
1 line
5.4 KiB
CSS
1 line
5.4 KiB
CSS
@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:var(--fl-font-size-xl,1.25rem);line-height:1;opacity:.5;padding:var(--fl-spacing-xs,.25rem);position:absolute;right:var(--fl-spacing-md,.75rem);top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity var(--fl-duration-fast,.15s) ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher .fl-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:var(--fl-spacing-md,.75rem);right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}} |