fix(sketch): fix sketch palette format to use new filters (#287)

Fix #285

__tests__/formats/__snapshots__/all.test.js.snap

@@ -636,3 +636,22 @@ exports[`formats all should match sketch/palette snapshot 1`] = `
   \\"colors\\": []
 }"
 `;
+
+exports[`formats all should match sketch/palette/v2 snapshot 1`] = `
+"{
+  \\"compatibleVersion\\": \\"2.0\\",
+  \\"pluginVersion\\": \\"2.2\\",
+  \\"colors\\": [
+    {
+      \\"0\\": \\"#\\",
+      \\"1\\": \\"F\\",
+      \\"2\\": \\"F\\",
+      \\"3\\": \\"0\\",
+      \\"4\\": \\"0\\",
+      \\"5\\": \\"0\\",
+      \\"6\\": \\"0\\",
+      \\"name\\": \\"color_red\\"
+    }
+  ]
+}"
+`;

lib/common/formats.js

@@ -725,5 +725,39 @@ module.exports = {
       })
       .value();
     return JSON.stringify(to_ret, null, 2);
+  },
+
+  /**
+   * Creates a sketchpalette file compatible with version 2 of
+   * the sketchpalette plugin. To use this you should use the 
+   * 'color/sketch' transform to get the correct value for the colors.
+   * 
+   * @memberof Formats
+   * @kind member
+   * @example
+   * ```json
+   * {
+   *   "compatibleVersion": "2.0",
+   *   "pluginVersion": "2.2",
+   *   "colors": [
+   *     {name: "red", r: 1.0, g: 0.0, b: 0.0, a: 1.0},
+   *     {name: "green", r: 0.0, g: 1.0, b: 0.0, a: 1.0},
+   *     {name: "blue", r: 0.0, g: 0.0, b: 1.0, a: 1.0}
+   *   ]
+   * }
+   * ```
+   */
+  'sketch/palette/v2': function(dictionary) {
+    var to_ret = {
+      compatibleVersion: '2.0',
+      pluginVersion: '2.2',
+      colors: dictionary.allProperties.map(function(prop) {
+        // Merging the token's value, which should be an object with r,g,b,a channels
+        return Object.assign({
+          name: prop.name
+        }, prop.value)
+      })
+    };
+    return JSON.stringify(to_ret, null, 2);
   }
 };

lib/common/transforms.js

@@ -415,6 +415,38 @@ module.exports = {
       }
     }
   },
+
+  /**
+   * 
+   * Transforms a color into an object with red, green, blue, and alpha
+   * attributes that are floats from 0 - 1. This object is how Sketch stores
+   * colors.
+   * 
+   * ```js
+   * // Matches: prop.attributes.category === 'color'
+   * // Returns:
+   * {
+   *   red: 0.5,
+   *   green: 0.5,
+   *   blue: 0.5,
+   *   alpha: 1
+   * }
+   * ```
+   * @memberof Transforms
+   */
+  'color/sketch': {
+    type: 'value',
+    matcher: (prop) => prop.attributes.category === 'color',
+    transformer: function(prop) {
+      let color = Color(prop.original.value).toRgb();
+      return {
+        red: (color.r / 255).toFixed(2),
+        green: (color.g / 255).toFixed(2),
+        blue: (color.b / 255).toFixed(2),
+        alpha: color.a
+      }
+    }
+  },
 
   /**
    * Transforms the value into a scale-independent pixel (sp) value for font sizes on Android. It will not scale the number.