fix: corrected midtone color outputs (#46)

* fix: corrected midtone color outputs * @trivial: removed temporary window export
adobe · Jan 21, 2020 · 5c780b7 · 5c780b7
1 parent 34a7686
commit 5c780b7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/packages/contrast-colors/index.js b/packages/contrast-colors/index.js
@@ -214,25 +214,24 @@ function generateContrastColors({
   let swatches = 3000;
 
   let scaleData = createScale({swatches: swatches, colorKeys: colorKeys, colorspace: colorspace, shift: 1});
+  let baseV = (d3.hsluv(base).v) / 100;
 
   let Contrasts = d3.range(swatches).map((d) => {
     let rgbArray = [d3.rgb(scaleData.scale(d)).r, d3.rgb(scaleData.scale(d)).g, d3.rgb(scaleData.scale(d)).b];
     let baseRgbArray = [d3.rgb(base).r, d3.rgb(base).g, d3.rgb(base).b];
-    let ca = contrast(rgbArray, baseRgbArray).toFixed(2);
+    let ca = contrast(rgbArray, baseRgbArray, baseV).toFixed(2);
 
     return Number(ca);
   });
 
   let contrasts = Contrasts.filter(el => el != null);
 
-  let baseLum = luminance(d3.rgb(base).r, d3.rgb(base).g, d3.rgb(base).b);
-
   let newColors = [];
   ratios = ratios.map(Number);
 
   // Return color matching target ratio, or closest number
   for (let i=0; i < ratios.length; i++){
-    let r = binarySearch(contrasts, ratios[i], baseLum);
+    let r = binarySearch(contrasts, ratios[i], baseV);
     newColors.push(d3.rgb(scaleData.colors[r]).hex());
   }
 
@@ -253,15 +252,14 @@ function luminance(r, g, b) {
 //   return (0.299*r + 0.587*g + 0.114*b);
 // }
 
-// Separate files in a lib folder as well.
-function contrast(color, base) {
+function contrast(color, base, baseV) {
   let colorLum = luminance(color[0], color[1], color[2]);
   let baseLum = luminance(base[0], base[1], base[2]);
 
   let cr1 = (colorLum + 0.05) / (baseLum + 0.05);
   let cr2 = (baseLum + 0.05) / (colorLum + 0.05);
 
-  if (baseLum < 0.5) {
+  if (baseV < 0.5) {
     if (cr1 >= 1) {
       return cr1;
     }

diff --git a/packages/contrast-colors/test/generateContrastColors.test.js b/packages/contrast-colors/test/generateContrastColors.test.js
@@ -99,6 +99,28 @@ test('should generate black when negative ratio lighter than available colors',
   expect(colors).toEqual([ '#000000' ]);
 });
 
+// Mid-Tone Backgrounds
+test('should generate slightly lighter & darker grays on a darker midtone gray background', function() {
+  let colors = generateContrastColors({colorKeys: ['#000000'], base: "#737373",ratios: [1.2, -1.2], colorspace: "LCH"}); // positive & negative ratios
+
+  expect(colors).toEqual([ '#808080', '#666666' ]);
+});
+test('should generate slightly lighter & darker grays on a lighter midtone gray background', function() {
+  let colors = generateContrastColors({colorKeys: ['#000000'], base: "#787878",ratios: [1.2, -1.2], colorspace: "LCH"}); // positive & negative ratios
+
+  expect(colors).toEqual([ '#6b6b6b', '#858585' ]);
+});
+test('should generate slightly lighter & darker oranges on a darker midtone slate background', function() {
+  let colors = generateContrastColors({colorKeys: ["#ff8602","#ab3c00","#ffd88b"], base: "#537a9c",ratios: [1.2, -1.2], colorspace: "LCH"}); // positive & negative ratios
+
+  expect(colors).toEqual([ '#d66102', '#b64601' ]);
+});
+test('should generate slightly lighter & darker oranges on a lighter midtone slate background', function() {
+  let colors = generateContrastColors({colorKeys: ["#ff8602","#ab3c00","#ffd88b"], base: "#537b9d",ratios: [1.2, -1.2], colorspace: "LCH"}); // positive & negative ratios
+
+  expect(colors).toEqual([ '#b84601', '#d76202' ]);
+});
+
 // Expected errors
 test('should generate no colors, missing colorKeys', function() {
   expect(