Function createOutputColors

docs/ui/src/js/createOutputColors.js:17–182

(dest)

import {round, cssColorToRgb, colorToGrayScale} from './utils';

function createOutputColors(dest) {
  if (dest) dest = document.getElementById(dest);

  let wcagFormula = document.getElementById('themeWCAG').value;
  let swatchesOutputs = document.getElementById('swatchesOutputs');
  let themeOutputs = document.getElementById('themeOutputs');
  swatchesOutputs.classList = 'hideSwatchLuminosity hideSwatchContrast';

  let theme = _theme.contrastColors;
  let themeBackgroundColor;
  if (_theme.output === 'RGB' || _theme.output === 'HEX') {
    themeBackgroundColor = theme[0].background;
  } else {
    // First, make the color an RGB color
    themeBackgroundColor = cssColorToRgb(theme[0].background);
  }

  let themeBackgroundColorArray = [d3.rgb(themeBackgroundColor).r, d3.rgb(themeBackgroundColor).g, d3.rgb(themeBackgroundColor).b];
  const backgroundLum = _theme.lightness;

  let themeColorArray = [];

  themeOutputs.style.backgroundColor = themeBackgroundColor;
  let destinations = dest ? [dest] : [themeOutputs, swatchesOutputs];
  // Iterate each color from theme except 1st object (background)
  destinations.map((dest) => {
    dest.innerHTML = ' ';

    // Ignore first theme item (background color) when making swatches for
    // the Swatch tab. Only create the background color in the Theme preview
    // Only grab one color (i=1, i<2) to show in UI, which will be turned grayscale
    let length = dest === swatchesOutputs ? 2 : theme.length;
    for (let i = dest === swatchesOutputs ? 1 : 0; i < length; i++) {
      let wrapper = document.createElement('div');
      wrapper.className = 'themeOutputItem';

      let swatchWrapper = document.createElement('div');
      swatchWrapper.className = 'themeOutputColor';
      let colorName = theme[i].name;
      let outerTextColor = backgroundLum > 50 ? '#000000' : '#ffffff';
      // Iterate each color value
      if (theme[i].values) {
        let p = document.createElement('p');
        p.className = 'spectrum-Heading spectrum-Heading--sizeXXS themeOutputItem--Heading';
        p.style.color = outerTextColor;
        p.innerHTML = theme[i].name;

        if (dest === themeOutputs) {
          wrapper.appendChild(p);
        }

        for (let j = 0; j < theme[i].values.length; j++) {
          // for each value object
          let originalValue = theme[i].values[j].value; // output value of color
          let formattedName = colorName.replace(/\s+/g, ''); // these names will have had spaces removed already
          let swatchName = theme[i].values[j].name.replace(formattedName, '');

          let colorForTransform;