Function createTokensOutput

docs/ui/src/js/createOutputParameters.js:101–150

()

}

function createTokensOutput() {
  let paramsOutput = document.getElementById('themeTokensParams');
  let themeName = getThemeName();

  let themeObj = {};
  let contrastText = _theme.contrast != 1 ? `, contrast of ${_theme.contrast * 100}%` : '';
  let saturationText = _theme.saturation != 100 ? `, saturation of ${_theme.saturation}%` : '';
  themeObj['description'] = `Color theme tokens at lightness of ${_theme.lightness}%${contrastText}${saturationText}`;

  const textLowContrast = 'Do not use for UI elements or text.';
  const textLarge = 'Color can be used for UI elements or large text.';
  const textSmall = 'Color can be used for small text.';

  let contrastColors = _theme.contrastColors;
  let backgroundColor = _theme.contrastColors[0].background;

  let backgroundColorObj = {
    $value: backgroundColor,
    $type: 'color',
    $description: `UI background color. All color contrasts evaluated and generated against this color.`
  };
  themeObj['Background'] = backgroundColorObj;

  let formulaString = _theme.formula === 'wcag2' ? 'WCAG 2.x (relative luminance)' : 'WCAG 3 (APCA)';
  let largeText = _theme.formula === 'wcag3' ? 60 : 3;
  let smallText = _theme.formula === 'wcag3' ? 75 : 4.5;

  for (let i = 1; i < contrastColors.length; i++) {
    let thisColor = contrastColors[i];
    for (let j = 0; j < thisColor.values.length; j++) {
      let color = thisColor.values[j];
      let descriptionText = color.contrast < largeText ? textLowContrast : color.contrast >= largeText && color.contrast < smallText ? textLarge : textSmall;

      let colorObj = {
        $value: color.value,
        $type: 'color',
        $description: `${descriptionText} ${formulaString} contrast is ${color.contrast}:1 against background ${backgroundColor}`
      };
      themeObj[color.name] = colorObj;
    }
  }
  let tokenObj = {
    [themeName]: themeObj
  };

  const highlightedCode = hljs.highlight(JSON.stringify(tokenObj, null, 2), {
    language: 'javascript'
  }).value;
  paramsOutput.innerHTML = highlightedCode;
}

outputFormatPicker.addEventListener('change', createOutputParameters);
createOutputParameters();