From 4f14f9f96e5e8d7f858f57d4dfd75f2687b21fe8 Mon Sep 17 00:00:00 2001 From: Craig Morris Date: Sun, 8 Jul 2018 18:15:06 +0100 Subject: [PATCH] feat(layer): Find close colours in the project in case the designer is lazy --- package.json | 9 +++++++++ src/lib.js | 28 +++++++++++++++++++++++++++- test/layer.test.js | 8 +++++++- test/sample-data/layers.json | 28 ++++++++++++++++++++++++++++ test/styleguideTextStyles.test.js | 4 +++- yarn.lock | 8 ++++++++ 6 files changed, 82 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index f281539..5dfab32 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "tailwind-zeplin-extension", "version": "0.0.0-development", + "license": "MIT", "description": "Utilities to generate Tailwind Config and classes for your components.", "repository": "https://github.com/morrislaptop/tailwind-zeplin-extension.git", "bin": "./cli.js", @@ -35,6 +36,12 @@ "type": "text", "id": "color", "default": "" + }, + { + "name": "Max Color Distance", + "type": "text", + "id": "maxColorDistance", + "default": "50" } ] }, @@ -42,6 +49,8 @@ "css": "^2.2.1", "css-shorthand-expand": "^1.2.0", "lodash": "^4.17.5", + "nearest-color": "^0.4.2", + "rgb-hex": "^2.1.0", "string": "^3.3.3", "zem": "^0.1.2" }, diff --git a/src/lib.js b/src/lib.js index b6f8107..db0df21 100644 --- a/src/lib.js +++ b/src/lib.js @@ -1,5 +1,7 @@ const s = require('string') const _ = require('lodash') +const rgbHex = require('rgb-hex') +const nearestColor = require('nearest-color') const REM = 16 function classesToElement(el, classes, content) { @@ -311,13 +313,37 @@ function fontWeightTextToClass(weight) { } function colorToClass(context, color, prefix) { - let projectColor = color && context.project.findColorEqual(color) + let projectColor = findClosestColour(context, color) if (!projectColor || projectColor.name.toLowerCase() === context.getOption('color').toLowerCase()) return null return prefix + projectColor.name } +function findClosestColour(context, color) { + if (! color) return + // return color && context.project.findColorEqual(color) + + // Convert to object the nearestColor library understands + let colors = context.project.colors.reduce((obj, color) => { + obj[color.name] = '#' + rgbHex(color.r, color.g, color.b) + return obj + }, {}) + + // Find the closest + let closest = nearestColor.from(colors)('#' + rgbHex(color.r, color.g, color.b)) + + // Return if it's too far away... + let max = context.getOption('maxColorDistance') || 0 + if (! closest || closest.distance > max) return + + // Find the original project colour + let rgb = closest.rgb + let projectColour = context.project.colors.find(color => color.r == rgb.r && color.g == rgb.g && color.b == rgb.b) + + return projectColour +} + function readTailwindConfig(context) { let js = context.getOption('tailwind') diff --git a/test/layer.test.js b/test/layer.test.js index 648b087..3e9f437 100644 --- a/test/layer.test.js +++ b/test/layer.test.js @@ -101,6 +101,12 @@ let tests = { expect(css.code).toBe(`
`) }, + + LayerWithSlightlyDifferentColour(context, layer) { + let css = ext.layer(context, layer) + + expect(css.code).toBe(`
`) + } } describe('Sample Data Tests', () => { @@ -110,7 +116,7 @@ describe('Sample Data Tests', () => { let tailwind = require('../src/tailwind-config.json') tailwind.screens = { } let project = new Project(data.project) - let context = new Context({ project, options: { font: 'SFProText', color: 'black', tailwind: JSON.stringify(tailwind) }}) + let context = new Context({ project, options: { font: 'SFProText', color: 'black', maxColorDistance: "50", tailwind: JSON.stringify(tailwind) }}) /** * Runs through each sample layer and calls the function to test it diff --git a/test/sample-data/layers.json b/test/sample-data/layers.json index 903ef52..b2dd922 100644 --- a/test/sample-data/layers.json +++ b/test/sample-data/layers.json @@ -764,5 +764,33 @@ "shadows": [], "textStyles": [], "assets": [] + }, + { + "type": "shape", + "name": "Layer with slightly different colour", + "fills": [ + { + "type": "color", + "blendMode": "normal", + "fill": { + "r": 255, + "g": 255, + "b": 1, + "a": 1 + }, + "color": { + "r": 255, + "g": 255, + "b": 1, + "a": 1 + } + } + ], + "opacity": 1, + "rect": {}, + "borders": [], + "shadows": [], + "textStyles": [], + "assets": [] } ] \ No newline at end of file diff --git a/test/styleguideTextStyles.test.js b/test/styleguideTextStyles.test.js index f9525de..1d92b18 100644 --- a/test/styleguideTextStyles.test.js +++ b/test/styleguideTextStyles.test.js @@ -15,7 +15,8 @@ test('exports Tailwind components for text styles', () => { project, options: { font: 'Ubuntu', - color: 'black' + color: 'black', + maxColorDistance: "50", } }) @@ -52,6 +53,7 @@ test('reads the Tailwing config for things', () => { options: { font: 'Ubuntu', color: 'black', + maxColorDistance: "50", tailwind: JSON.stringify(tailwind) } }) diff --git a/yarn.lock b/yarn.lock index de2fe63..e0b39ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4349,6 +4349,10 @@ natural-compare@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" +nearest-color@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/nearest-color/-/nearest-color-0.4.2.tgz#6ebd3a859969e76dd834e609beeecef73c3881e0" + needle@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.0.tgz#f14efc69cee1024b72c8b21c7bdf94a731dc12fa" @@ -5339,6 +5343,10 @@ retry@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4" +rgb-hex@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-2.1.0.tgz#c773c5fe2268a25578d92539a82a7a5ce53beda6" + rgb-regex@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"