You've already forked php-flasher
mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-04-05 12:32:55 +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.
28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import './ruby.scss'
|
||
import type { Envelope } from '../../types'
|
||
import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
|
||
import { CLASS_NAMES } from '../shared/constants'
|
||
|
||
export const rubyTheme = {
|
||
render: (envelope: Envelope): string => {
|
||
const { type, message } = envelope
|
||
|
||
return `
|
||
<div class="${CLASS_NAMES.theme('ruby')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
|
||
<div class="fl-shine"></div>
|
||
<div class="${CLASS_NAMES.content}">
|
||
<div class="fl-icon-circle">
|
||
<div class="${CLASS_NAMES.icon}"></div>
|
||
</div>
|
||
<div class="${CLASS_NAMES.text}">
|
||
<div class="${CLASS_NAMES.message}">${message}</div>
|
||
</div>
|
||
<button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
|
||
</div>
|
||
<div class="${CLASS_NAMES.progressBar}">
|
||
<div class="${CLASS_NAMES.progress}"></div>
|
||
</div>
|
||
</div>`
|
||
},
|
||
}
|