Better handling of blur radius and spread values for shadows.

Convertiv · Mar 16, 2023 · 8d8478d · 8d8478d
1 parent 8e49b1d
commit 8d8478d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/figma-exporter/src/figma/types.ts b/figma-exporter/src/figma/types.ts
@@ -828,6 +828,7 @@ export interface Effect {
   readonly color?: Color;
   readonly blendMode?: BlendMode;
   readonly offset?: Vector2;
+  readonly spread: number;
 }
 
 /** A solid color, gradient, or image texture that can be applied as fills or strokes */

diff --git a/figma-exporter/src/utils/convertColor.ts b/figma-exporter/src/utils/convertColor.ts
@@ -108,16 +108,16 @@ export const transformFigmaTextCaseToCssTextTransform = (textCase: FigmaTypes.Ty
 };
 
 export const transformFigmaEffectToCssBoxShadow = (effect: FigmaTypes.Effect): string => {
-  const { type, color, offset, radius, visible } = effect;
+  const { type, color, offset, radius, visible, spread } = effect;
 
   if (!visible) {
     return '';
   }
 
-  if (type === 'DROP_SHADOW' && color && offset && radius) {
+  if (type === 'DROP_SHADOW' && color && offset) {
     const { x, y } = offset;
 
-    return `${x}px ${y}px ${radius}px ${transformFigmaColorToCssColor(color)}`;
+    return `${x}px ${y}px ${radius ?? 0}px ${spread ? spread + 'px ' : ''}${transformFigmaColorToCssColor(color)}`;
   }
 
   return '';