Bulk contrast feature in conversion dialog (#183)

* added initial form fill for contrast. WCAG 2 formula works * added apca to bulk contrast Co-authored-by: Nathan Baldwin <[email protected]>
adobe · Nov 18, 2022 · 210908c · 210908c
1 parent d7be62c
commit 210908c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/packages/ui/src/js/bulkConvertDialog.js b/packages/ui/src/js/bulkConvertDialog.js
@@ -9,10 +9,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import d3 from './d3';
+import { APCAcontrast, sRGBtoY } from "apca-w3";
 import {
   round
 } from './utils';
+import {contrast} from '@adobe/leonardo-contrast-colors';
 import { saveAs } from 'file-saver';
 
 const simpleColorConverter = require('simple-color-converter');
@@ -38,6 +39,7 @@ function cancelBulkConvert() {
 }
 
 function bulkItemConvertColorInput(e) {
+  let background = document.getElementById('bulkConvertBackground').value;
   let bulkInputs = document.getElementById('bulkConvertColors');
   let bulkValues = bulkInputs.value.replace(/\r\n/g,"\n").replace(/[,\/]/g,"\n").replace(" ", "").replace(/['\/]/g, "").replace(/["\/]/g, "").replace(" ", "").split("\n");
   bulkValues = bulkValues.map((value) => {return value.replace(" ", "")});
@@ -64,11 +66,9 @@ function bulkItemConvertColorInput(e) {
 
   let data = [];
   colors.map((c) => {
-    data.push(createColorJson(c, opts))
+    data.push(createColorJson(c, opts, background))
   })
 
-  // console.log(data)
-
   const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
   const header = Object.keys(data[0])
   const csv = [
@@ -93,7 +93,7 @@ function bulkItemConvertColorInput(e) {
   bulkInputs.value = " ";
 }
 
-function createColorJson(value, colorSpaces) {
+function createColorJson(value, colorSpaces, background) {
   if(!chroma.valid(value)) {
     // Should return an error
   } 
@@ -119,6 +119,13 @@ function createColorJson(value, colorSpaces) {
       if(colorSpaces[i] === 'CMYK') colorChannels = color.cmyk().map((c) => {return c * 100});
       if(colorSpaces[i] === 'XYZ') colorChannels = Object.values(new simpleColorConverter({ rgb: {r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2] }, to: 'xyz' }).color);
       if(colorSpaces[i] === 'Pantone') colorChannels = new simpleColorConverter({ rgb: {r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2] }, to: 'pantone' }).color;
+      if(colorSpaces[i] === 'wcag2') colorChannels = round(contrast(color.rgb(), chroma(background).rgb(), 'wcag2'), 2);
+      if(colorSpaces[i] === 'wcag3') {
+        const baseLightness = chroma(background).hsluv()[2];
+        const baseV = round(baseLightness / 100, 2);
+        let base = chroma(background).rgb();
+        colorChannels = round( (baseV < 0.5) ? APCAcontrast( sRGBtoY( color.rgb() ), sRGBtoY( base ) ) * -1 : APCAcontrast( sRGBtoY( color.rgb() ), sRGBtoY( base ) ), 2);
+      }
 
       if(colorSpaces[i] === 'HEX') colorChannelLabels = ['Hex'];
       if(colorSpaces[i] === 'RGB') colorChannelLabels =  ['rgb (R)', 'rgb (G)', 'rgb (B)'];
@@ -135,6 +142,10 @@ function createColorJson(value, colorSpaces) {
       if(colorSpaces[i] === 'XYZ') colorChannelLabels = ['xyz (X)', 'xyz (Y)', 'xyz (Z)'];
       if(colorSpaces[i] === 'Pantone') colorChannelLabels = ['Pantone'];
 
+      if(colorSpaces[i] === 'wcag2') colorChannelLabels = [`Rel Lum vs ${background}`]
+      if(colorSpaces[i] === 'wcag3') colorChannelLabels = [`APCA vs ${background}`]
+
+
       if(Array.isArray(colorChannels)) {
         colorChannels = colorChannels.map((c) => {return round(c, 2)})
       } else {

diff --git a/packages/ui/src/views/dialog_bulkColorConverter.html b/packages/ui/src/views/dialog_bulkColorConverter.html
@@ -161,6 +161,45 @@ <h2 class="spectrum-Dialog-heading">Convert bulk</h2>
           </div>
         </div>
       </div>
+
+      <div class="spectrum-Form spectrum-Form--labelsAbove">
+        <div class="spectrum-Form-item">
+          <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Contrast</label>
+          <div class="spectrum-Form-itemField">
+            <div class="spectrum-FieldGroup">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
+                <input type="checkbox" class="spectrum-Checkbox-input convertBulkColorspace" id="checkboxConvert-wcag2">
+                <span class="spectrum-Checkbox-box">
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                  </svg>
+                </span>
+                <span class="spectrum-Checkbox-label">Relative luminance</span>
+              </label>
+            </div>
+          </div>
+          <div class="spectrum-Form-itemField">
+            <div class="spectrum-FieldGroup">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
+                <input type="checkbox" class="spectrum-Checkbox-input convertBulkColorspace" id="checkboxConvert-wcag3">
+                <span class="spectrum-Checkbox-box">
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                  </svg>
+                </span>
+                <span class="spectrum-Checkbox-label">APCA</span>
+              </label>
+            </div>
+          </div>
+          <div class="spectrum-Form-itemField">
+            <div class="spectrum-Form-item spectrum-Form-item--row">
+              <label class="spectrum-FieldLabel spectrum-FieldLabel--left spectrum-Fieldlabel--sizeM ">Background color</label>
+              <input type="color" id="bulkConvertBackground" class="keyColor-Item keyColor-Item--standalone"/>
+            </div>
+          </div>
+        </div>
+
+      </div>
     </section>
     <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
       <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item" onclick="cancelBulkConvert()">Cancel</button>