proper empty gradient

Author: mathieudutour

src/jsonUtils/borders.ts

@@ -1,5 +1,5 @@
 import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
-import { makeColorFromCSS } from './models';
+import { makeColorFromCSS, emptyGradient } from './models';
 import { ViewStyle, LayoutInfo, BorderStyle } from '../types';
 import same from '../utils/same';
 import { makeVerticalBorder, makeHorizontalBorder } from './shapeLayers';
@@ -31,14 +31,7 @@ export const createUniformBorder = (
         blendMode: FileFormat.BlendMode.Normal,
         opacity: 1,
       },
-      gradient: {
-        _class: 'gradient',
-        gradientType: FileFormat.GradientType.Linear,
-        elipseLength: 0,
-        from: '{0, 0}',
-        to: '{1, 1}',
-        stops: [],
-      },
+      gradient: emptyGradient,
     },
   ];
 

src/jsonUtils/models.ts

@@ -88,6 +88,38 @@ export const makeColorFromCSS = (input: Color, alpha: number = 1): FileFormat.Co
   };
 };
 
+export const emptyGradient: FileFormat.Gradient = {
+  _class: 'gradient',
+  elipseLength: 0,
+  from: '{0.5, 0}',
+  gradientType: 0,
+  to: '{0.5, 1}',
+  stops: [
+    {
+      _class: 'gradientStop',
+      position: 0,
+      color: {
+        _class: 'color',
+        alpha: 1,
+        blue: 1,
+        green: 1,
+        red: 1,
+      },
+    },
+    {
+      _class: 'gradientStop',
+      position: 1,
+      color: {
+        _class: 'color',
+        alpha: 1,
+        blue: 0,
+        green: 0,
+        red: 0,
+      },
+    },
+  ],
+};
+
 // Solid color fill
 export const makeColorFill = (cssColor: Color): FileFormat.Fill => ({
   _class: 'fill',
@@ -103,14 +135,7 @@ export const makeColorFill = (cssColor: Color): FileFormat.Fill => ({
     blendMode: FileFormat.BlendMode.Normal,
     opacity: 1,
   },
-  gradient: {
-    _class: 'gradient',
-    gradientType: FileFormat.GradientType.Linear,
-    elipseLength: 0,
-    from: '{0, 0}',
-    to: '{1, 1}',
-    stops: [],
-  },
+  gradient: emptyGradient,
 });
 
 export const makeImageFill = (
@@ -131,14 +156,7 @@ export const makeImageFill = (
     blendMode: FileFormat.BlendMode.Normal,
     opacity: 1,
   },
-  gradient: {
-    _class: 'gradient',
-    gradientType: FileFormat.GradientType.Linear,
-    elipseLength: 0,
-    from: '{0, 0}',
-    to: '{1, 1}',
-    stops: [],
-  },
+  gradient: emptyGradient,
 });
 
 // Used in frames, etc

src/jsonUtils/shapeLayers.ts

@@ -1,6 +1,6 @@
 import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
 import makeResizeConstraint from './resizeConstraint';
-import { generateID, makeRect, makeColorFromCSS } from './models';
+import { generateID, makeRect, makeColorFromCSS, emptyGradient } from './models';
 import { makeStyle } from './style';
 import { Color, ResizeConstraints, ViewStyle } from '../types';
 
@@ -261,14 +261,7 @@ export const makeVerticalBorder = (
         blendMode: FileFormat.BlendMode.Normal,
         opacity: 1,
       },
-      gradient: {
-        _class: 'gradient',
-        gradientType: FileFormat.GradientType.Linear,
-        elipseLength: 0,
-        from: '{0, 0}',
-        to: '{1, 1}',
-        stops: [],
-      },
+      gradient: emptyGradient,
     },
   ];
   return content;
@@ -298,14 +291,7 @@ export const makeHorizontalBorder = (
         blendMode: FileFormat.BlendMode.Normal,
         opacity: 1,
       },
-      gradient: {
-        _class: 'gradient',
-        gradientType: FileFormat.GradientType.Linear,
-        elipseLength: 0,
-        from: '{0, 0}',
-        to: '{1, 1}',
-        stops: [],
-      },
+      gradient: emptyGradient,
     },
   ];
   return content;