Fix issue when applying opacity to linear-gradient

marcomontalbano · Oct 30, 2020 · 5aa861a · 5aa861a
1 parent 197bf42
commit 5aa861a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 9 deletions.
diff --git a/packages/core/src/lib/figmaStyles/index.test.ts b/packages/core/src/lib/figmaStyles/index.test.ts
@@ -201,6 +201,42 @@ describe('figmaStyles.', () => {
                 ]);
             });
 
+            it('should parse a linear gradient with alpha', () => {
+                const node = getNode(styleNodes, 'color-figma-gradient-10');
+
+                const parsed = figmaStyles.parseStyles([node]);
+
+                expect(parsed).to.deep.equal([
+                    {
+                        styleType: 'FILL',
+                        visible: true,
+                        name: 'color-figma-gradient-10',
+                        comment: '',
+                        originalNode: node,
+                        fills: [
+                            {
+                                type: 'GRADIENT_LINEAR',
+                                visible: true,
+                                angle: '90deg',
+                                gradientStops: [
+                                    { color: { r: 242, g: 78, b: 30, a: 0.1, rgba: 'rgba(242, 78, 30, 0.1)' }, position: 0 },
+                                    { color: { r: 184, g: 89, b: 255, a: 0.1, rgba: 'rgba(184, 89, 255, 0.1)' }, position: 34.375 },
+                                    { color: { r: 26, g: 188, b: 254, a: 0.1, rgba: 'rgba(26, 188, 254, 0.1)' }, position: 67.708 },
+                                    { color: { r: 10, g: 207, b: 131, a: 0.1, rgba: 'rgba(10, 207, 131, 0.1)' }, position: 100 },
+                                ],
+                                value: 'linear-gradient(90deg, rgba(242, 78, 30, 0.1) 0%, rgba(184, 89, 255, 0.1) 34.375%, rgba(26, 188, 254, 0.1) 67.708%, rgba(10, 207, 131, 0.1) 100%)',
+                            },
+                            {
+                                type: 'SOLID',
+                                visible: true,
+                                color: { r: 255, g: 255, b: 255, a: 1, rgba: 'rgba(255, 255, 255, 1)' },
+                                value: 'rgba(255, 255, 255, 1)',
+                            },
+                        ],
+                    },
+                ]);
+            });
+
             it('should parse a combination of colors and keep the right order', () => {
                 const node = getNode(styleNodes, 'color-multi-gradient');
 

diff --git a/packages/core/src/lib/figmaStyles/paintStyle.ts b/packages/core/src/lib/figmaStyles/paintStyle.ts
@@ -3,20 +3,21 @@ import * as FigmaExport from '@figma-export/types';
 
 import { notEmpty } from '../utils';
 
-const extractColor = ({ color, opacity }: FigmaExport.ExtractableColor): (FigmaExport.Color | undefined) => {
+const extractColor = ({ color, opacity = 1 }: FigmaExport.ExtractableColor): (FigmaExport.Color | undefined) => {
     if (!color) {
         return undefined;
     }
 
-    const convert = (figmaColor: number) => parseInt((figmaColor * 255).toFixed(0), 10);
+    const toFixed = (number: number, fractionDigits: number) => parseFloat((number).toFixed(fractionDigits));
+    const convert = (figmaColor: number) => toFixed(figmaColor * 255, 0);
 
     // eslint-disable-next-line object-curly-newline
     let { r = 0, g = 0, b = 0, a = 1 } = color;
 
     r = convert(r);
     g = convert(g);
     b = convert(b);
-    a = opacity || a;
+    a = toFixed(opacity * a, 2);
 
     return {
         r,
@@ -40,11 +41,11 @@ const extractGradientLinear = (paint: Figma.Paint): (FigmaExport.LinearGradient
         return `${parseFloat(deg.toFixed(2))}deg`;
     };
 
-    const getGradientStops = (figmaGradientStops: readonly Figma.ColorStop[]): FigmaExport.LinearColorStop[] => {
+    const getGradientStops = (figmaGradientStops: readonly Figma.ColorStop[], opacity?: number): FigmaExport.LinearColorStop[] => {
         const gradientStops: FigmaExport.LinearColorStop[] = [];
 
         figmaGradientStops.forEach((stop) => {
-            const color = extractColor(stop);
+            const color = extractColor({ ...stop, opacity });
             const position = parseFloat((stop.position * 100).toFixed(3));
 
             if (color) {
@@ -57,7 +58,7 @@ const extractGradientLinear = (paint: Figma.Paint): (FigmaExport.LinearGradient
 
     return {
         angle: getAngle(paint.gradientHandlePositions),
-        gradientStops: getGradientStops(paint.gradientStops),
+        gradientStops: getGradientStops(paint.gradientStops, paint.opacity),
     };
 };
 

diff --git a/packages/website/scss/index.scss b/packages/website/scss/index.scss
@@ -65,12 +65,10 @@ pre[class*=language-] {
 
     &.with-opacity-05 {
         background: $color-figma-gradient-05;
-        background: linear-gradient(270deg, fade-out($color-1, .95) 0%, fade-out($color-2, .95) 33%, fade-out($color-3, .95) 66%, fade-out($color-4, .95) 100%), rgba(255, 255, 255, 0.9);
     }
 
     &.with-opacity-10 {
         background: $color-figma-gradient-10;
-        background: linear-gradient(270deg, fade-out($color-1, .90) 0%, fade-out($color-2, .90) 33%, fade-out($color-3, .90) 66%, fade-out($color-4, .90) 100%), rgba(255, 255, 255, 0.9);
     }
 
     &.text {

diff --git a/packages/website/src/output-styles/FigmaStyles.js b/packages/website/src/output-styles/FigmaStyles.js
@@ -25,8 +25,8 @@ const FigmaStyles = () => (
             <div className="feature-box">
                 <code className="figma-gradient text">Linear Gradients</code>
                 <div className="figma-box color-alpha-50" data-tooltip="color-alpha-50" />
-                <div className="figma-box color-linear-gradient" data-tooltip="color-linear-gradient" />
                 <div className="figma-box color-figma-gradient" data-tooltip="color-figma-gradient" />
+                <div className="figma-box color-linear-gradient" data-tooltip="color-linear-gradient" />
                 <div className="figma-box color-linear-gradient-alpha" data-tooltip="color-linear-gradient-alpha" />
                 <div className="figma-box color-multi-gradient" data-tooltip="color-multi-gradient" />
             </div>