Merge pull request #174 from salmoro/main

Correctly get DROP_SHADOW spread value
marcomontalbano · Feb 28, 2025 · cc54b65 · cc54b65
2 parents c1cae3a + c0286cb
commit cc54b65
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/core/src/lib/figmaStyles/effectStyle.ts b/packages/core/src/lib/figmaStyles/effectStyle.ts
@@ -10,7 +10,6 @@ const createEffectStyle = (effect: Figma.Effect): FigmaExport.EffectStyle | unde
         case 'INNER_SHADOW':
         case 'DROP_SHADOW': {
             const color = extractColor(effect);
-            const spreadRadius = 0;
             const inset = effect.type === 'INNER_SHADOW';
 
             if (color && effect.offset) {
@@ -21,10 +20,11 @@ const createEffectStyle = (effect: Figma.Effect): FigmaExport.EffectStyle | unde
                     inset,
                     offset: effect.offset,
                     blurRadius: effect.radius,
-                    spreadRadius,
+                    // @ts-expect-error figma-js types are not up-to-date
+                    spreadRadius: effect.spread ?? 0,
 
-                    // eslint-disable-next-line max-len
-                    value: `${inset ? 'inset ' : ''}${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${spreadRadius}px ${color.rgba}`,
+                    // @ts-expect-error figma-js types are not up-to-date
+                    value: `${inset ? 'inset ' : ''}${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${effect.spread ?? 0}px ${color.rgba}`,
                 };
             }
 

diff --git a/packages/core/src/lib/figmaStyles/index.test.ts b/packages/core/src/lib/figmaStyles/index.test.ts
@@ -322,15 +322,15 @@ describe('figmaStyles.', () => {
                             },
                             inset: true,
                             blurRadius: 10,
-                            spreadRadius: 0,
+                            spreadRadius: 2,
                             color: {
                                 r: 242,
                                 g: 78,
                                 b: 30,
                                 a: 0.5,
                                 rgba: 'rgba(242, 78, 30, 0.5)',
                             },
-                            value: 'inset 4px 5px 10px 0px rgba(242, 78, 30, 0.5)',
+                            value: 'inset 4px 5px 10px 2px rgba(242, 78, 30, 0.5)',
                         }],
                     },
                 ]);
@@ -357,15 +357,15 @@ describe('figmaStyles.', () => {
                             },
                             inset: true,
                             blurRadius: 10,
-                            spreadRadius: 0,
+                            spreadRadius: 2,
                             color: {
                                 r: 242,
                                 g: 78,
                                 b: 30,
                                 a: 0.5,
                                 rgba: 'rgba(242, 78, 30, 0.5)',
                             },
-                            value: 'inset 4px 5px 10px 0px rgba(242, 78, 30, 0.5)',
+                            value: 'inset 4px 5px 10px 2px rgba(242, 78, 30, 0.5)',
                         }],
                     },
                 ]);
@@ -392,15 +392,15 @@ describe('figmaStyles.', () => {
                             },
                             inset: false,
                             blurRadius: 7,
-                            spreadRadius: 0,
+                            spreadRadius: 6,
                             color: {
                                 r: 0,
                                 g: 0,
                                 b: 0,
                                 a: 0.25,
                                 rgba: 'rgba(0, 0, 0, 0.25)',
                             },
-                            value: '3px 4px 7px 0px rgba(0, 0, 0, 0.25)',
+                            value: '3px 4px 7px 6px rgba(0, 0, 0, 0.25)',
                         }],
                     },
                 ]);