| 16 | |
| 17 | // Convert effects (shadow, filter，backdrop-filter) |
| 18 | export const convertEffects = (node: FigmaFrameInfo, inlineStyles: CSSStyles): void => { |
| 19 | const effects = node.effects; |
| 20 | |
| 21 | if (!effects || effects.length === 0) return; |
| 22 | |
| 23 | const shadows: string[] = []; |
| 24 | const filters: string[] = []; |
| 25 | const backdropFilters: string[] = []; |
| 26 | |
| 27 | for (const effect of effects) { |
| 28 | if (effect.visible === false) continue; |
| 29 | |
| 30 | if (effect.type === 'DROP_SHADOW') { |
| 31 | const x = effect.offset?.x || 0; |
| 32 | const y = effect.offset?.y || 0; |
| 33 | const blur = effect.radius || 0; |
| 34 | const spread = effect.spread || 0; |
| 35 | // Use ColorConverter for shadow color |
| 36 | const color = effect.color ? ColorConverter.convert({ type: 'SOLID', color: effect.color }) : 'rgba(0, 0, 0, 0.25)'; |
| 37 | |
| 38 | shadows.push(`${x.toFixed(0)}px ${y.toFixed(0)}px ${(blur / 2).toFixed(0)}px ${spread.toFixed(0)}px ${color}`); |
| 39 | } else if (effect.type === 'INNER_SHADOW') { |
| 40 | const x = effect.offset?.x || 0; |
| 41 | const y = effect.offset?.y || 0; |
| 42 | const blur = effect.radius || 0; |
| 43 | const spread = effect.spread || 0; |
| 44 | const color = effect.color ? ColorConverter.convert({ type: 'SOLID', color: effect.color }) : 'rgba(0, 0, 0, 0.25)'; |
| 45 | |
| 46 | shadows.push(`inset ${x.toFixed(0)}px ${y.toFixed(0)}px ${(blur / 2).toFixed(0)}px ${spread.toFixed(0)}px ${color}`); |
| 47 | } else if (effect.type === 'LAYER_BLUR') { |
| 48 | const blur = effect.radius || 0; |
| 49 | filters.push(`blur(${(blur / 2).toFixed(0)}px)`); |
| 50 | } else if (effect.type === 'BACKGROUND_BLUR') { |
| 51 | const blur = effect.radius || 0; |
| 52 | backdropFilters.push(`blur(${(blur / 2).toFixed(0)}px)`); |
| 53 | } |
| 54 | } |
| 55 | |
| 56 | if (shadows.length > 0) { |
| 57 | inlineStyles.boxShadow = shadows.join(', '); |
| 58 | } |
| 59 | |
| 60 | if (filters.length > 0) { |
| 61 | inlineStyles.filter = filters.join(' '); |
| 62 | } |
| 63 | |
| 64 | if (backdropFilters.length > 0) { |
| 65 | inlineStyles.backdropFilter = backdropFilters.join(', '); |
| 66 | } |
| 67 | }; |
| 68 | |
| 69 | // Convert fills to background |
| 70 | // Handles multiple fills and creates layered backgrounds |