diff --git a/__tests__/formats/__snapshots__/all.test.js.snap b/__tests__/formats/__snapshots__/all.test.js.snap index 0c886a319..1e42371ad 100644 --- a/__tests__/formats/__snapshots__/all.test.js.snap +++ b/__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\\" + } + ] +}" +`; diff --git a/lib/common/formats.js b/lib/common/formats.js index c4056045f..34d63f51d 100644 --- a/lib/common/formats.js +++ b/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); } }; diff --git a/lib/common/transforms.js b/lib/common/transforms.js index f145f60fb..18cd54fab 100644 --- a/lib/common/transforms.js +++ b/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.