| 5 | * example: shadow |
| 6 | */ |
| 7 | export const htmlShadow = (node: BlendMixin): string => { |
| 8 | // [when testing] node.effects can be undefined |
| 9 | if (node.effects && node.effects.length > 0) { |
| 10 | const shadowEffects = node.effects.filter( |
| 11 | (d) => |
| 12 | (d.type === "DROP_SHADOW" || |
| 13 | d.type === "INNER_SHADOW" || |
| 14 | d.type === "LAYER_BLUR") && |
| 15 | d.visible, |
| 16 | ); |
| 17 | // simple shadow from tailwind |
| 18 | if (shadowEffects.length > 0) { |
| 19 | const shadows: string[] = []; |
| 20 | |
| 21 | shadowEffects.forEach((shadow) => { |
| 22 | let x = 0; |
| 23 | let y = 0; |
| 24 | let blur = 0; |
| 25 | let spread = ""; |
| 26 | let inner = ""; |
| 27 | let color = ""; |
| 28 | |
| 29 | if (shadow.type === "DROP_SHADOW" || shadow.type === "INNER_SHADOW") { |
| 30 | x = shadow.offset.x; |
| 31 | y = shadow.offset.y; |
| 32 | blur = shadow.radius; |
| 33 | spread = shadow.spread ? `${shadow.spread}px ` : ""; |
| 34 | inner = shadow.type === "INNER_SHADOW" ? " inset" : ""; |
| 35 | color = htmlColor(shadow.color, shadow.color.a); |
| 36 | } else if (shadow.type === "LAYER_BLUR") { |
| 37 | x = shadow.radius; |
| 38 | y = shadow.radius; |
| 39 | blur = shadow.radius; |
| 40 | } |
| 41 | |
| 42 | shadows.push(`${x}px ${y}px ${blur}px ${spread}${color}${inner}`); |
| 43 | }); |
| 44 | |
| 45 | // Return box-shadow in the desired format |
| 46 | return shadows.join(", "); |
| 47 | } |
| 48 | } |
| 49 | return ""; |
| 50 | }; |